Advanced Usage

The Markdown component integrates core features like real-time Markdown rendering, table of contents generation, and full-text search. In most cases, importing this component is enough. While it is feature-complete, it can be less flexible in certain scenarios (e.g., custom layouts). To address this, we also provide standalone Render, Search, and Toc components (the Markdown component is built on top of these three). This allows you to import only what you need and compose them freely.

TIP

This demo only demonstrates manual imports. For other import options, see Global Registration.

View Source

vue

<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>

Advanced Usage ​

Advanced Usage