markdown-it-vue 快速上手指南：一个 Vue 组件搞定 Markdown 渲染

markdown-it-vue 快速上手指南：一个 Vue 组件搞定 Markdown 渲染

【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue

markdown-it-vue 是一个基于 markdown-it 解析引擎的 Markdown 渲染 Vue 组件库：装好、注册，一个组件标签就能把字符串变成渲染好的页面。做博客、文档站、知识库的开发者可以直接用它，省去自己逐个安装插件、拼渲染管线的重复劳动。

为什么是它：一条现成的渲染管线

先回忆一下自己搭 Markdown 渲染的熟悉流程：引入 markdown-it 跑通官方语法；接着为目录、emoji、删除线、脚注、数学公式逐个装插件；再处理代码高亮、链接打开方式、图片预览；想上 mermaid 流程图或 Echarts，还得再单独接一遍。每一步都不难，叠起来就是一堆样板代码。

markdown-it-vue 把这件事压缩成一个 Vue 2 组件，默认帮你装好：

• markdown-it 引擎与常用插件：emoji、删除线、上下标、脚注、定义列表、任务列表、katex 数学公式等；
• 若干内置自定义插件：图片尺寸控制与查看器、链接属性设置、代码高亮、font-awesome 图标支持；
• 图表渲染：mermaid、Echarts（为控制体积使用 simple 精简版）、flowchart.js；
• GitHub 风格 TOC、info/error/warning 提示框、AsciiMath 等细节功能。

🚀 如何安装并引入组件

npm install markdown-it-vue之后，模板里写一行：

<markdown-it-vue class="md-body" :content="content" />

script 里import MarkdownItVue from 'markdown-it-vue'注册为局部组件，同时别忘了引入markdown-it-vue/dist/markdown-it-vue.css样式文件。content给一个 Markdown 字符串变量即可，内容变化时渲染结果自动跟着更新，不需要手动触发。

如何配置外链在新标签页打开

常用行为不用碰引擎，直接传options属性：

options: { markdownIt: { linkify: true }, linkAttributes: { attrs: { target: '_blank', rel: 'noopener' } } }

其中markdownIt节点原样透传给 markdown-it 本体（比如 linkify），其余键位作用于内置插件。默认值已经替你定好了一批，例如 katex 公式出错时标红而不是抛错、mermaid 主题、图片查看器开关等；需要更多行为时按官方选项表逐项覆盖即可。

图表、公式与代码高亮开箱即用吗

想让页面承载复杂内容时，重点看这几项：

• 数学公式：markdown-it-katex 渲染 LaTeX，同时支持 AsciiMath 写法；
• 图表：mermaid 流程图、Echarts 简单图表、flowchart.js 流程图三套都接好了；
• 代码高亮：内置 highlight.js，覆盖 Python、Go、TypeScript、Java、SQL 等常见语言；
• 图片：在 Markdown 里直接指定宽高，点击可用内置查看器预览。

最直接的验证方式是跑一遍官方示例：本地装完依赖后npm run dev，打开 8080 端口，左边源码、右边渲染结果对照着看。

⚖️ 完整版和 light 轻量版怎么选

完整版最重的部分是 mermaid。如果你的内容里没有 mermaid 流程图，就换轻量版markdown-it-vue-light——组件名换成它、样式文件也换成 light 版本即可，效果一致，只是把 mermaid 摘掉以缩小打包体积。注意 Echarts 在两个版本里都已经换成 simple 构建，不会额外添多少重量。

一句话判断：文档里要画流程图，用完整版；只写文本、公式和代码，用 light 版。

还能再装自己的插件吗

可以。组件把 markdown-it 的插件扩展入口留出来了：拿到组件 ref 后调用use(你的插件)，任何 markdown-it 生态的插件都能装进来。所以它不是封闭封装，能力边界可以自己扩展。

写在最后

如果你在 Vue 2 项目里想要一个"装完就能用"的 Markdown 渲染方案——标准语法、目录、emoji、公式、代码高亮、图片预览都想要——markdown-it-vue 基本一次到位。建议先跑一遍官方示例页确认你的内容都能渲染，再按是否用到 mermaid 决定选完整版还是 light 版。

【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue