Vue + markdown-it：打造优雅的 Markdown 编辑与渲染体验

原创于 2025-10-16 17:23:19 发布 · 301 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue技术探索与实践专栏收录该内容

7 篇文章

订阅专栏

大家好，我是腾讯云开发者社区的 Front_Yue，本篇文章将和大家分享如何在 Vue 项目中使用 markdown-it 进行 Markdown 渲染，并结合一些高级应用案例，让你的项目不仅能够优雅展示 Markdown 内容，还能实现代码高亮、数学公式、目录生成等高级功能。

一、为什么选择 markdown-it？

在前端项目中，Markdown 常用于博客编辑器、文档展示、评论区等场景。虽然我们可以直接使用简单的解析库，但 markdown-it 拥有以下优势：

高性能：解析速度快，支持大规模 Markdown 文本渲染。
扩展性强：支持插件机制，可以轻松扩展功能。
渲染效果好：遵循 CommonMark 规范，兼容性更强。

因此，在 Vue 项目中，markdown-it 是一个非常合适的 Markdown 渲染解决方案。

二、在 Vue 中快速上手 markdown-it

首先安装依赖：

npm install markdown-it

在 Vue 组件中使用：

<template>
  <div v-html="compiledMarkdown"></div>
</template>

<script setup>
import { ref, computed } from 'vue'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
const content = ref('# Hello Vue + markdown-it')
const compiledMarkdown = computed(() => md.render(content.value))
</script>

这样就可以在页面中直接渲染 Markdown 内容了。

三、常用插件扩展

1. 代码高亮（highlight.js）

Markdown-it 本身不提供代码高亮，但可以结合 highlight.js：

npm install highlight.js

import hljs from 'highlight.js'
import 'highlight.js/styles/github.css'

const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return `<pre class="hljs"><code>${hljs.highlight(str, { language: lang }).value}</code></pre>`
    }
    return `<pre class="hljs"><code>${md.utils.escapeHtml(str)}</code></pre>`
  }
})

这样，代码块会自动高亮显示。

2. 数学公式（KaTeX / MathJax）

如果需要在文档中展示数学公式，可以结合 markdown-it-katex：

npm install markdown-it-katex katex

import 'katex/dist/katex.min.css'
import markdownItKatex from 'markdown-it-katex'

md.use(markdownItKatex)

在 Markdown 中输入公式：

行内公式：$E = mc^2$

块级公式：
$$
\int_0^1 x^2 dx
$$

即可渲染出精美的数学公式。

$E = mc^2$

$\int_0^1 x^2 dx$

3. 目录生成（Table of Contents）

当文档较长时，目录导航非常重要，可以使用 markdown-it-toc-done-right：

npm install markdown-it-toc-done-right

import markdownItToc from 'markdown-it-toc-done-right'

md.use(markdownItToc, { listType: 'ul' })

Markdown 中加入 [toc] 即可生成目录。

四、高级应用案例

案例 1：构建一个 Markdown 编辑器

配合 v-model 输入框，可以实现实时渲染的 Markdown 编辑器：

<template>
  <div class="editor">
    <textarea v-model="content"></textarea>
    <div v-html="compiledMarkdown"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import MarkdownIt from 'markdown-it'

const md = new MarkdownIt()
const content = ref('## 输入 Markdown 内容\n\n实时预览效果！')
const compiledMarkdown = computed(() => md.render(content.value))
</script>

这样即可实现「输入 Markdown，右侧实时预览」的功能。

案例 2：结合 Vue Router 构建文档系统

你可以在 Vue Router 中动态加载 Markdown 文件，然后用 markdown-it 渲染。例如：

import axios from 'axios'

async function loadMarkdown(file) {
  const { data } = await axios.get(`/docs/${file}.md`)
  return md.render(data)
}

结合 v-html，就可以轻松搭建一个静态文档网站。

案例 3：结合插件打造增强型知识库

使用 highlight.js 实现代码高亮；
使用 markdown-it-katex 支持数学公式；
使用 markdown-it-toc-done-right 生成目录；
甚至还可以结合 自定义插件，比如自动给外链加上 target="_blank" 属性。

这样，你就能构建一个功能完善的知识库或技术博客系统。

五、总结

本文从 基础使用 到 插件扩展，再到 高级应用案例，系统介绍了如何在 Vue 项目中使用 markdown-it 渲染 Markdown 内容。

基础部分：快速渲染 Markdown；
插件扩展：代码高亮、数学公式、目录生成；
高级案例：Markdown 编辑器、文档系统、知识库。

无论是构建博客、技术文档，还是编辑器工具，markdown-it 都能帮助我们快速实现优雅、强大的 Markdown 渲染效果。

最后，感谢腾讯云开发者社区小伙伴的陪伴，如果你喜欢我的博客内容，认可我的观点和经验分享，请点赞、收藏和评论，这将是对我最大的鼓励和支持。同时，也欢迎大家提出宝贵的意见和建议，让我能够更好地改进和完善我的博客。谢谢！