企业官网建设流程全解析

一个 Vue 组件搞定 Markdown 渲染：LaTeX 公式、Mermaid 图表开箱即用

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

在 Vue 项目里做 Markdown 渲染，公式得自己接 KaTeX？图表得自己接 Mermaid？markdown-it-vue 把这些 Markdown 插件封装进一个 Vue 组件，你只需传入文本和配置，就能直接渲染。

省掉三套集成：公式、图表、高亮不用再自己接

想象你正在做一个技术博客或知识库：

• 文章里既要写 LaTeX 公式，又要贴 Mermaid 流程图。平时你得分别安装 markdown-it-katex、mermaid、highlight.js，再各自写容器语法和初始化代码；用这个组件，Markdown 里直接写就行。
• 文档站点需要 GFM 表格、目录、emoji、任务列表和提示框（info / warning / error / success），这些 GFM 样式特性已经内置，不用自己拼装。
• 课程页面想放数据图，用 Echarts 配置就能画出来；图片支持=50x50这种写法控制尺寸，还能点击放大查看。

原理速览：markdown-it 的 Vue 封装 + 可插拔插件

一句话：它是在 markdown-it 之上做的 Vue 2 封装，内部串好一组 markdown-it 插件，再通过options属性暴露给你调。

• markdown-it：核心解析引擎，GFM 语法和 GitHub 风格目录（githubToc）都在这层
• markdown-it-emoji：emoji 和 font-awesome 图标渲染
• markdown-it-katex：LaTeX 公式渲染，可用throwOnError控制出错时是否抛异常
• mermaid / Echarts / flowchart.js：三种图表渲染，均以自研插件形式内置
• 代码高亮、图片点击放大查看器、外链属性控制

不够用也可以扩展：this.$refs.myMarkdownItVue.use(MyPlugin)一行挂上你自己的 markdown-it 插件。

3 分钟上手：一行模板，顺手配置外链打开方式

安装npm install markdown-it-vue后，模板里只需一行：

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

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

其中markdownIt透传 markdown-it 自身参数（比如linkify: true让纯 URL 自动变成链接）；linkAttributes配置外链打开方式，默认就是_blank加noopener，防反向劫持。katex、mermaid、githubToc 等键同理，不满意的默认值改这里就行。

挑版本：只要基础渲染，就用 markdown-it-vue-light 缩小打包体积

• 适合：Vue 2 的博客系统、知识库、在线教育这类内容页，尤其是文章里常带图表、公式、代码块，想要一个现成的 Vue Markdown 渲染插件省集成工作的人。
• 不适合：只做纯文本基础渲染的场景。完整版带着 echarts、mermaid 等依赖，体积不小；这时建议换成精简版markdown-it-vue-light（去掉了 mermaid 图表），直接缩小打包体积。另外注意 Echarts 用的是 simple 包，只支持基础图表。
• 注意：组件目前基于 Vue 2，Vue 3 项目先确认兼容性再引入。

下一步

建议先 clone 仓库跑一下示例（yarn install && yarn dev），在本地把公式、图表、高亮都试一遍，再决定要不要带进自己的项目。

项目地址：项目地址

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