三步搞定 Vue 项目里的 Markdown 渲染markdown-it-vue 上手指南【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vuemarkdown-it-vue 是一个基于 markdown-it 解析引擎的 Vue 渲染组件把一段 Markdown 文本直接渲染成带 GitHub 风格的富文本页面。它内置了 emoji、自动目录、数学公式和 mermaid / ECharts 图表渲染一行标签即可接入还提供精简版来控制打包体积。三步完成首次渲染✅ 装npm install markdown-it-vue✅ 用在 Vue 2 项目里注册后页面里只写一个标签markdown-it-vue classmd-body :contentcontent /✅ 补样式import markdown-it-vue/dist/markdown-it-vue.csscontent就是一段 Markdown 字符串比如# 你好。组件渲染结束会触发render-complete事件方便你在图表画完后再做截图、埋点之类的操作。图表、公式、目录这些活它帮你干了 不用自己逐个装 markdown-it 插件以下能力开箱即用GFM 全家桶目录TOC、任务列表、删除线、emoji、脚注、下标/上标三类图表mermaid 流程图、ECharts 统计图、flowchart.js 流程图数学公式KaTeX 渲染 LaTeX写错公式只标红不抛错图片增强语法里加50x50就能控制图片宽高默认带点击预览提示框info / warning / error 三种个性化消息代码高亮内置常用语言的 highlight.js支持 JS、Python、Go、Java 等 40 种大白话解释GFM 是 GitHub 上的 Markdown 扩展语法KaTeX 是把 LaTeX 公式转成网页 HTML 的渲染库。链接想在新标签页打开只改一个 options️ 所有配置都通过options传入组件比如让链接新窗口打开options: { linkAttributes: { attrs: { target: _blank, rel: noopener } } }顺手加上markdownIt: { linkify: true }纯 URL 也能变成可点击链接。公式报错颜色、mermaid 主题、图片对齐方式都走同一个入口不用到处翻文档。打包体积超标换精简版 markdown-it-vue-light 完整版为了画图能力打包了 mermaid它还整包引入 lodash体积不小。如果场景只是纯文本、表格和 emoji直接换精简版import MarkdownItVueLight from markdown-it-vue/dist/markdown-it-vue-light.umd.min.js精简版把 mermaid 整个移除打包和加载都会快一截。需要图表公式时再换回完整版两者 API 一致切换只改 import。更多细节看 README_CN.md。【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
