markdown-it-vue 实操指南：3分钟跑起来，4个高频坑一次说清

markdown-it-vue 实操指南3分钟跑起来4个高频坑一次说清【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vuemarkdown-it-vue 是一个面向 Vue 2 的 Markdown 组件底层用 markdown-it 做解析引擎GFM TOC、mermaid、Echarts、KaTeX 公式这些插件全部预先配好你只管把内容传进去。这篇文章带你从装到跑通再帮你避开几个上手后最容易卡住的地方。3分钟把它跑起来两条路任选其一。路线一直接跑仓库自带的 Demo。git clone https://gitcode.com/gh_mirrors/ma/markdown-it-vue cd markdown-it-vue yarn install yarn dev跑起来后浏览器打开 localhost:8080你会看到左边编辑 Markdown、右边实时出效果的演示页。TOC 目录、流程图、数学公式、Echarts 饼图都渲染出来了就说明成功了。路线二装进你自己的 Vue 2 项目当依赖用。npm install markdown-it-vue核心代码就这一段content属性是字符串把 Markdown 源文丢进去就行template markdown-it-vue classmd-body :contentcontent / /template script import MarkdownItVue from markdown-it-vue import markdown-it-vue/dist/markdown-it-vue.css export default { components: { MarkdownItVue }, data() { return { content: # hello markdown-it-vue } } } /script上手后最容易卡住的几个地方端口 8080 被占用Demo 起不来报错里带着 EADDRINUSE八成是这个端口被别的进程占了。可以先lsof -i :8080找到凶手或者直接换个端口命令照搬 dev 脚本的写法npx vue-cli-service serve --port 8081 ./example/main.js集成进项目样式全乱了文字能出来但表格、标题、提示框全没了样式看着像裸 HTML。九成是漏了引入样式表import markdown-it-vue/dist/markdown-it-vue.css这行不能省。GitHub 风格的排版和 info、warning、error 提示框的样式都在这份 CSS 里少了它整个观感就没了。传了 options之前的默认行为悄悄失效给组件加了几个配置之后发现链接不再自动新窗口打开、公式报错也不标红了。原因是 options 里每个键markdownIt、katex、linkAttributes都是整体替换不做属性级合并。你传了哪个键那个键里没写的属性就丢了。所以改配置时把要保留的都补全options: { markdownIt: { linkify: true, html: true }, linkAttributes: { attrs: { target: _blank, rel: noopener } }, katex: { throwOnError: false, errorColor: #cc0000 } }只写要改的而不写要留的是这块最常见的翻车姿势。打包后体积一下涨了很多库默认带上了 mermaid 和 Echarts这俩都是大块头产物里自然不小。如果你的文档不画 mermaid 图直接换轻量版import MarkdownItVueLight from markdown-it-vue/dist/markdown-it-vue-light.umd.min.js import markdown-it-vue/dist/markdown-it-vue-light.csslight 版就是把 mermaid 摘掉了组件名换成markdown-it-vue-light即可。另外提前说一句这个库基于 Vue 2Vue 3 的项目不能直接用。几个值得知道的配置项options.markdownItmarkdown-it 本体配置默认只开了linkify: true想开 html 或改换行行为时改它linkAttributes默认所有链接target: _blankrel: noopener想让链接在当前窗口打开就改这里katex.throwOnError默认false公式写错了显示红色占位而不是抛异常想自己捕获报错时改githubToc默认给 2~3 级标题生成锚点链接文档标题层级不同就调tocFirstLevel/tocLastLevelimage.viewer默认true点图片会弹出查看器放大不需要就关掉mermaid.theme默认default可选forest、dark、neutral写在后面markdown-it-vue 的价值就一句话十几个 markdown-it 插件不用你逐个装、逐个配一行content传进去TOC、图表、公式全给你渲好了。想再往下走翻翻 README.md 里的 Options 和 Plugin list 两节把内置插件的配置全貌过一遍就行。【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考