前言
如果您需要 Vue3 版本,请访问 这篇文章。
在 vue2 | nuxt2 项目开发中,详解识别解析markdown内容,并自动生成对应文章目录功能,对markdown文档内容进行读取分析找到标题#关键字(可自定义要读取的标签,支持多级标题嵌套渲染),然后在指定位置生成渲染markdown内容对应的文章锚点tree树形结构目录TOC,点击目录导航菜单时会跳转到文章内容对应的标题锚点位置并且有过渡跳转动画,另外用户浏览markdown文章滚动经过标题锚点时右侧目录会自动高亮选中效果,附带渲染报错、markdown解析不显示、目录无法生成等问题。
如下图所示,传入 Markdown 内容自动解析并生成目录,强大可靠无BUG。
示例代码
具体实现代码如下,请直接复制运行测试即可。