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

一个 Vue 组件搞定 Markdown 渲染LaTeX 公式、Mermaid 图表开箱即用【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue在 Vue 项目里做 Markdown 渲染公式得自己接 KaTeX图表得自己接 Mermaidmarkdown-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-emojiemoji 和 font-awesome 图标渲染markdown-it-katexLaTeX 公式渲染可用throwOnError控制出错时是否抛异常mermaid / Echarts / flowchart.js三种图表渲染均以自研插件形式内置代码高亮、图片点击放大查看器、外链属性控制不够用也可以扩展this.$refs.myMarkdownItVue.use(MyPlugin)一行挂上你自己的 markdown-it 插件。3 分钟上手一行模板顺手配置外链打开方式安装npm install markdown-it-vue后模板里只需一行markdown-it-vue classmd-body :contentcontent :optionsoptions /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 2Vue 3 项目先确认兼容性再引入。下一步建议先 clone 仓库跑一下示例yarn install yarn dev在本地把公式、图表、高亮都试一遍再决定要不要带进自己的项目。项目地址项目地址【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考