vue2 Markdown toc

您可以使用vue-markdown中的插件`markdown-it-toc-done-right`来生成Markdown的目录。首先，您需要安装`vue-markdown`和`markdown-it-toc-done-right`：

npm install vue-markdown markdown-it-toc-done-right --save

然后在您的Vue组件中使用`vue-markdown`并注册`markdown-it-toc-done-right`插件。例如：

<template>
  <div>
    <vue-markdown :source="markdown" :toc="true" />
  </div>
</template>

<script>
import VueMarkdown from 'vue-markdown'
import markdownItToc from 'markdown-it-toc-done-right'

export default {
  components: {
    VueMarkdown
  },
  data () {
    return {
      markdown: '# Hello\n\n## World\n\n### This is a test\n\n#### H4\n\n##### H5\n\n###### H6'
    }
  },
  mounted () {
    VueMarkdown.props.options.default = () => ({
      preset: 'default',
      breaks: true,
      html: true,
      linkify: true,
      typographer: true,
      quotes: '“”‘’',
      highlight: (code, lang) => {
        if (!lang) {
          return hljs.highlightAuto(code).value
        }
        return hljs.highlight(lang, code).value
      },
      use: [markdownItToc]
    })
  }
}
</script>

这将为您的Markdown文本自动生成一个具有嵌套层次结构的目录。请注意，您需要在Vue组件的`mounted`钩子中注册`markdown-it-toc-done-right`插件，并将`use`选项设置为一个包含该插件的数组。