vue2 前端 markdown 怎么实现目录自动生成
时间: 2024-02-17 16:04:34 浏览: 95
markdown toc 生成--自动生成markdown文档侧边栏目录
实现 markdown 目录自动生成可以使用 markdown-it 插件,并结合 vue.js 实现。可以按以下步骤进行操作:
1. 安装依赖:`npm install markdown-it --save`
2. 在 vue 组件中引入 markdown-it:`import MarkdownIt from 'markdown-it'`
3. 创建 markdown-it 实例:`const md = new MarkdownIt()`
4. 解析 markdown 内容并生成 html:`const html = md.render(markdownContent)`
5. 使用正则表达式从生成的 html 中提取出所有标题(如 h1、h2、h3 等),并生成目录列表。
6. 将目录列表渲染到页面上。
以下是一个简单的实现示例:
```vue
<template>
<div>
<div class="markdown-body" v-html="html"></div>
<div class="toc" v-html="toc"></div>
</div>
</template>
<script>
import MarkdownIt from 'markdown-it'
export default {
data() {
return {
html: '',
toc: '',
}
},
mounted() {
const md = new MarkdownIt()
const markdownContent = '# Title1\nContent1\n## Title2\nContent2\n### Title3\nContent3'
const html = md.render(markdownContent)
const toc = this.generateToc(html)
this.html = html
this.toc = toc
},
methods: {
generateToc(html) {
const toc = []
const headers = html.match(/<h\d.*?>(.*?)<\/h\d>/gi)
if (headers) {
headers.forEach((header) => {
const level = header.match(/<h(\d).*?>/i)[1]
const title = header.replace(/<\/?h\d>/gi, '')
toc.push(`<li class="toc-level-${level}"><a href="#">${title}</a></li>`)
})
}
return toc.length ? `<ul>${toc.join('')}</ul>` : ''
},
},
}
</script>
```
在上面的示例中,我们首先创建了一个 markdown-it 实例,然后使用 render 方法将 markdown 内容转换成 html。接着,我们通过正则表达式从 html 中提取出所有标题,并生成目录列表。最后,将目录列表渲染到页面上。
需要注意的是,上面的示例只实现了基本的目录生成功能。如果需要更复杂的功能,可以考虑使用已有的 markdown-it 插件或者编写自己的插件来实现。
阅读全文