进阶用法

Markdown 组件集成了 Markdown 实时渲染，目录生成和全文搜索等核心功能，大多数场景下只需引入该组件即可。虽然它功能全面，但在某些特定场景中（如自定义布局等）可能不够灵活。为此，我们提供了单独的 Render、 Search 和 Toc 组件（Markdown 组件同样基于这三个组件构建）。这样您可以根据实际需求按需引入，自由组合使用。

提示

本示例仅展示手动引入组件的方式，如需全局引入请参考。

展开源代码

<template>
  <div style="display: flex; flex-wrap: wrap">
    <div style="flex: 70%; overflow: auto">
      <vmd-search v-model="keyword" :target="renderRef" />
      <vmd-render ref="renderRef" style="height: 436px; overflow: auto" :src="md" />
    </div>
    <vmd-toc style="flex: auto" :target="renderRef" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { VmdRender, VmdSearch, VmdToc } from 'vue-markdown-design'

const keyword = ref('or')
const renderRef = ref(null)

const md = `
  # h1 Heading 8-)
  ## h2 Heading
  ### h3 Heading
  #### h4 Heading
  ##### h5 Heading
  ###### h6 Heading


  ## Horizontal Rules

  ___

  ---

  ***


  ## Emphasis

  **This is bold text**

  __This is bold text__

  *This is italic text*

  _This is italic text_

  ~~Strikethrough~~


  ## Blockquotes

  > Blockquotes can also be nested...
  >> ...by using additional greater-than signs right next to each other...
  > > > ...or with spaces between arrows.


  ## Lists

  Unordered

  + Create a list by starting a line with \`+\`, \`-\`, or \`*\`
  + Sub-lists are made by indenting 2 spaces:
    - Marker character change forces new list start:
      * Ac tristique libero volutpat at
      + Facilisis in pretium nisl aliquet
      - Nulla volutpat aliquam velit
  + Very easy!

  Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa


  1. You can use sequential numbers...
  1. ...or keep all the numbers as \`1.\`

  Start numbering with offset:

  57. foo
  1. bar


  ## Tables

  | Option | Description |
  | ------ | ----------- |
  | data   | path to data files to supply the data that will be passed into templates. |
  | engine | engine to be used for processing templates. Handlebars is the default. |
  | ext    | extension to be used for dest files. |

  Right aligned columns

  | Option | Description |
  | ------:| -----------:|
  | data   | path to data files to supply the data that will be passed into templates. |
  | engine | engine to be used for processing templates. Handlebars is the default. |
  | ext    | extension to be used for dest files. |
  `
</script>