Vue Markdown 组件 markdown-it-vue从安装到图表公式的完整清单【免费下载链接】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 目录、emoji、mermaid/echarts 图表、LaTeX 公式这些能力直接内置。本文按使用流程讲清楚装完怎么出第一个渲染效果、官方 demo 怎么跑、端口被占怎么办最后给一张常见报错的排错快查表。 安装并写出第一个渲染先装包当前发布版为 1.1.7npm install markdown-it-vue引入组件和样式两步都不能少import MarkdownItVue from markdown-it-vue import markdown-it-vue/dist/markdown-it-vue.css最小可用片段markdown-it-vue classmd-body :contentcontent /组件接收两个 propscontentMarkdown 原文字符串内容变化时会自动重新渲染。options透传给 markdown-it 和各插件的配置不传则用内置默认值。默认样式来自github-markdown-css所以渲染出来就是 GitHub 观感。忘了引那个.css文件时页面能出文字但没有排版——这是最常见的新手坑见下文快查表。️ 本地跑官方 demo端口被占用怎么换拉仓库跑示例工程git clone https://gitcode.com/gh_mirrors/ma/markdown-it-vue cd markdown-it-vue npm install npm run devdemo 基于 Vue CLI 4 构建默认起 8080 端口。如果终端报端口占用port is already in use两种处理查进程执行lsof -i :8080记下 PID 后终止它再重跑。换端口npm run dev -- --port 8081然后浏览器开http://localhost:8081。页面左边是一个文本框右边实时渲染。所有语法效果都可以直接在框里改着试改完右侧即刻更新。✨ 开箱即得的渲染能力不用任何配置以下语法直接可用GFM 目录正文写[toc]自动生成 h2/h3 两级目录并加锚点表格、删除线、任务列表、下标上标H~2~O、29^th^emoji:panda_face:和 font-awesome 图标:fa-car:提示框::: success、::: info、::: warning、::: error四种容器图片大小控制图可单独指定宽或高点图会弹出内置预览器代码高亮基于 highlight.js内置了 40 来种常用语言缺的语言需要提 PR官方示例的完整渲染效果如下想插自定义 markdown-it 插件时通过模板 ref 调用即可不用改源码this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin) 在 Markdown 里画图、渲染公式图表都走围栏代码块用语言名区分类型。mermaid 流程图支持 mermaid 8.x 的 flowchart、sequenceDiagram 等类型主题通过options.mermaid.theme调。echarts 图表块内是标准 JSONwidth、height是图表容器尺寸缺省 500×400echarts { width: 500, height: 400, series: [{ type: pie, data: [] }] }JSON 写错不会白屏会渲染出一段 echarts complains: ... 的报错文本照着改就行。注意库里只打包了 echarts.simple不常用的图表类型不在其中。 ### 公式渲染 行内公式用 $...$显示公式用 $$...$$ 单独成行行内$H_2O$ 显示 $$ \int_C x^3 dx 4y^2 dy $$公式走 katex默认 throwOnError: false——语法错了不抛异常只是把错误部分渲染成 #cc0000 红字。所以公式变红不是 bug是它在告诉你哪段写错了。 ## ⚡ 安装与渲染报错快查表 | 现象 | 原因 | 动作 | | --- | --- | --- | | 有文字无样式像纯文本 | 漏引样式文件 | 补 import markdown-it-vue/dist/markdown-it-vue.css | | 安装时刷 peer dependency 警告 | 你项目的 vue 与库内依赖版本不齐 | 锁定 vue2.6.12 vue-template-compiler2.6.12两者版本必须一致 | | 起 demo 报端口占用 | 8080 已被别的进程占用 | lsof -i :8080 找 PID 杀掉或改用 --port 8081 | | 公式整段显示红字 | 公式语法错误默认不抛错 | 对照 katex 语法检查要更严格可传 options.katex.throwOnError: true | | echarts 块变成 echarts complains | 图表配置 JSON 非法 | 检查 JSON 语法和 series 结构 | | 链接行为不符预期 | 默认新窗口打开 | 用 options.linkAttributes.attrs 覆盖 target/rel | 改 options 时注意它是整体透传常见项有 markdownIt、linkAttributes、katex、githubToc、mermaid、image 六组只写你要覆盖的部分。 ## 选完整版还是精简版 包里同时提供 markdown-it-vue-light 精简版。差别在于砍掉了 mermaid它连带整个 lodash很占包体积。如果你的文档从不画 mermaid 图用精简版 js import MarkdownItVueLight from markdown-it-vue/dist/markdown-it-vue-light.umd.min.js import markdown-it-vue/dist/markdown-it-vue-light.css组件名对应换成markdown-it-vue-light用法与完整版一致。下一步建议内置插件源码都在src/下markdown-it-plugin-echarts.js、markdown-it-image/等想看某个语法怎么实现的直接读对应文件example/components/example.js是一份覆盖全部语法的 Markdown 样例对着它逐项验证你环境里的渲染结果是最快的自检方式。【免费下载链接】markdown-it-vueThe vue lib for markdown-it.项目地址: https://gitcode.com/gh_mirrors/ma/markdown-it-vue创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
