企业官网建设流程全解析

三步搞定 Vue 项目里的 Markdown 渲染：markdown-it-vue 上手指南

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

markdown-it-vue 是一个基于 markdown-it 解析引擎的 Vue 渲染组件，把一段 Markdown 文本直接渲染成带 GitHub 风格的富文本页面。它内置了 emoji、自动目录、数学公式和 mermaid / ECharts 图表渲染，一行标签即可接入，还提供精简版来控制打包体积。

三步完成首次渲染

✅ 装：

npm install markdown-it-vue

✅ 用：在 Vue 2 项目里注册后，页面里只写一个标签：

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

✅ 补样式：

import 'markdown-it-vue/dist/markdown-it-vue.css'

content就是一段 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