在 Vue 2 与 Vue 3 中使用 markdown-it-vue 渲染 Markdown 和数学公式

markdown-it-vue是一个功能强大的 Markdown 渲染 Vue 组件，它基于markdown-it解析引擎，集成了多种插件，开箱即用地支持GitHub风格的Markdown、代码高亮、图表（Mermaid, ECharts）、表情符号（emoji）以及数学公式（LaTeX, AsciiMath）等高级功能。

🎯 核心优势一览

markdown-it-vue的强大之处在于其丰富的内置功能，能让开发者快速构建功能全面的文档系统。下表整理了它的主要特性：

现在，我们以 Vue 2 和 Vue 3 为例，介绍如何快速集成和使用。

🚀 Vue 2 集成：开箱即用

markdown-it-vue原生支持 Vue 2，集成起来非常方便。

1. 安装和引入
   通过 npm 安装，并在入口文件或组件中全局注册。

   npminstallmarkdown-it-vue

   // main.jsimportVuefrom'vue'importMarkdownItVuefrom'markdown-it-vue'import'markdown-it-vue/dist/markdown-it-vue.css'Vue.use(MarkdownItVue)

2. 基础使用
   在任意 Vue 组件中，通过<markdown-it-vue>组件和:content属性传入 Markdown 文本即可。

   <template><div><markdown-it-vueclass="markdown-body":content="markdownContent"/></div></template><script>exportdefault{data(){return{markdownContent:`# 爱因斯坦质能方程 这是行内公式: $E = mc^2$。 下面是块级公式： $$\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}$$`}}}</script>

   在这个示例中，组件会自动识别$...$和$$...$$包裹的 LaTeX 公式，并将其渲染为精美的数学表达式。

3. 扩展你的工具
   如果内置功能不满足需求，可以通过use方法手动添加markdown-it插件。

   <template><markdown-it-vueref="mdComponent":content="markdownContent"/></template><script>exportdefault{mounted(){// 假设要添加自定义插件 MyMarkdownItPluginthis.$refs.mdComponent.use(MyMarkdownItPlugin)}}</script>

⚡️ Vue 3 集成：两个便捷方案

由于markdown-it-vue主要为 Vue 2 设计，在 Vue 3 中直接使用可能会遇到兼容性问题。这里推荐两种更合适的方案。

• 方案一：推荐！使用 Vue 3 专属组件
  @f3ve/vue-markdown-it是一个为 Vue 3 全新设计的封装组件，语法和使用习惯与markdown-it-vue一脉相承。

  npminstall@f3ve/vue-markdown-it

  <template><VueMarkdownIt:source="markdownContent":options="options"/></template><scriptsetup>import{ref}from'vue'importVueMarkdownItfrom'@f3ve/vue-markdown-it'import'katex/dist/katex.min.css'// 引入KaTeX样式constmarkdownContent=ref(`# Vue 3 中的质能方程 行内公式: $E = mc^2$ 块级公式: $$\\int_{a}^{b} f(x) \\, dx$$`)// 配置 markdown-it 和 KaTeXconstoptions={markdownIt:{html:true,linkify:true,},// 启动 markdown-it-katex 插件use:['markdown-it-katex']}</script>

• 方案二：自己动手，使用 markdown-it
  这提供了最大的灵活性，适合对渲染过程有精细化控制需求的场景。

  npminstallmarkdown-it @iktakahiro/markdown-it-katex katex

  <template><divclass="markdown-body"v-html="renderedMarkdown"></div></template><scriptsetup>import{computed,ref}from'vue'importMarkdownItfrom'markdown-it'importmarkdownItKatexfrom'@iktakahiro/markdown-it-katex'import'katex/dist/katex.min.css'constmd=newMarkdownIt({html:true,linkify:true})md.use(markdownItKatex)constcontent=ref(`使用 $\\frac{-b \\pm \\sqrt{b^2-4ac}}{2a}$ 来求根。`)constrenderedMarkdown=computed(()=>md.render(content.value))</script>

⚙️ 高级配置：深度定制

通过options属性可以对markdown-it及其插件进行细致配置，以适应不同场景。

💎 总结与资源

总的来说，在 Vue 项目中使用markdown-it-vue来展示 Markdown 和数学公式，是一个高效且优雅的选择。

• Vue 2 项目：推荐直接使用markdown-it-vue，开箱即用，配置简单。
• Vue 3 项目：更推荐使用@f3ve/vue-markdown-it方案，它专为 Vue 3 设计，兼容性更好，集成体验更顺畅。