Vue3 中 Markdown 渲染与代码高亮实现
- 2026-01-16 04:32:33
✨Vue3集成Markdown渲染：用markdown-it+highlight.js实现代码高亮，初学者也能秒会！
在开发关于文档等Vue3项目时，经常需要展示Markdown格式的内容，比如文章、代码示例。今天就教大家用
markdown-it（解析Markdown）+highlight.js（代码高亮），快速实现一个美观、功能完整的Markdown渲染组件。全程代码可直接复用，即使是Vue3初学者也能轻松上手！
先搞懂核心工具：markdown-it + highlight.js
1. 为什么选这两个工具？
markdown-it：轻量、高性能的Markdown解析器，支持自定义插件扩展，是前端最主流的Markdown解析方案之一。
highlight.js：专门用于代码语法高亮的库，支持180+种编程语言，样式丰富，无需复杂配置就能实现漂亮的代码高亮效果。
两者搭配使用，既能解析Markdown文本，又能让其中的代码块拥有专业的高亮样式，完美满足Vue3项目的Markdown展示需求。
🚀 第一步：环境准备与安装依赖
1. 安装核心包
在Vue3项目根目录执行以下命令，安装所需依赖：
# 安装markdown-it（解析Markdown）npm install markdown-it --save# 安装highlight.js（代码高亮）npm install highlight.js --save2. 可选：安装highlight.js样式（必装！）
highlight.js提供了多种预设样式（如GitHub、VSCode风格），我们需要引入样式文件才能看到高亮效果：
# 无需额外安装，直接在代码中引入官方CDN或本地样式即可🛠️ 第二步：封装Markdown渲染组件（核心实战）
将核心逻辑封装成一个可复用的Vue3组件MarkdownRenderer.vue，方便在项目中随处调用。
1. 创建组件文件
在src/components目录下新建MarkdownRenderer.vue：
<template> <!-- 渲染后的Markdown内容容器 --><divclass="markdown-content"v-html="renderedHtml" ></div></template><scriptsetup>import { ref, computed, onMounted } from'vue'importMarkdownItfrom'markdown-it'import hljs from'highlight.js'// 引入highlight.js样式（可选：替换成你喜欢的样式）// 更多样式参考：https://highlightjs.org/static/demo/import'highlight.js/styles/github-dark.css'// 1. 定义Props：接收外部传入的Markdown文本const props = defineProps({// 要渲染的Markdown文本content: {type: String,required: true,default: '' },// 是否启用代码高亮（默认开启）highlight: {type: Boolean,default: true }})// 2. 初始化markdown-it实例const md = ref(null)onMounted(() => {// 配置markdown-it md.value = newMarkdownIt({// 开启换行解析（支持\n换行）breaks: true,// 开启链接自动识别linkify: true,// 代码块高亮配置（核心）highlight: props.highlight ? (str, lang) => {// 如果指定了编程语言且highlight.js支持，则高亮if (lang && hljs.getLanguage(lang)) {try {return hljs.highlight(str, { language: lang }).value } catch (err) {console.error('代码高亮失败：', err) } }// 未指定语言或不支持时，默认转义return md.value.utils.escapeHtml(str) } : null })})// 3. 计算属性：将Markdown文本解析为HTMLconst renderedHtml = computed(() => {if (!md.value || !props.content) return''// 解析Markdown为HTML字符串return md.value.render(props.content)})</script><stylescoped>/* 基础样式：适配Markdown渲染后的内容 */.markdown-content {padding: 20px;line-height: 1.8;font-size: 16px;}/* 代码块样式优化 */.markdown-content pre {padding: 16px;border-radius: 8px;overflow-x: auto;margin: 16px0;}.markdown-contentcode {padding: 2px4px;border-radius: 4px;font-size: 14px;}/* 其他Markdown元素样式适配（可选） */.markdown-contenth1 {font-size: 24px;margin: 20px0;border-bottom: 1px solid #eee;padding-bottom: 8px;}.markdown-contenth2 {font-size: 22px;margin: 18px0;}.markdown-contentp {margin: 10px0;}.markdown-contentul, .markdown-contentol {margin: 10px010px20px;}.markdown-contenta {color: #4299e1;text-decoration: none;}.markdown-contenta:hover {text-decoration: underline;}</style>代码核心解析（初学者重点看）：
Props定义：
content接收外部传入的Markdown文本，highlight控制是否开启代码高亮；markdown-it初始化：配置
breaks（换行）、linkify（自动识别链接），核心是highlight回调函数——调用highlight.js解析代码块；computed计算属性：将Markdown文本解析为HTML字符串，通过
v-html渲染到页面；样式适配：对渲染后的Markdown元素（标题、段落、代码块）做基础样式优化，提升可读性。
📌 第三步：在项目中使用Markdown组件
1. 父组件调用示例
在src/views/MarkdownPage.vue中使用封装好的组件：
<template><divclass="markdown-page"><h1>Vue3 Markdown渲染演示</h1><!-- 引入Markdown渲染组件 --><MarkdownRenderer:content="markdownText" /></div></template><scriptsetup>importMarkdownRendererfrom'@/components/MarkdownRenderer.vue'// 示例Markdown文本（包含代码块）const markdownText = `# Vue3 Markdown渲染示例这是一段用markdown-it解析的Markdown文本，支持：## 1. 基本格式- 列表项1- 列表项2**加粗文本** | *斜体文本* | [链接](https://vuejs.org/)## 2. 代码高亮演示### JavaScript代码\`\`\`javascript// Vue3组合式API示例import { ref, computed } from 'vue'const count = ref(0)const doubleCount = computed(() => count.value * 2)const increment = () => { count.value++}\`\`\`### HTML代码\`\`\`html<template> <div>{{ count }}</div></template>\`\`\``</script><stylescoped>.markdown-page {max-width: 1200px;margin: 0 auto;padding: 20px;background-color: #f8f9fa;min-height: 100vh;}</style>2. 运行效果
启动项目npm run dev，访问页面即可看到：
Markdown文本被正确解析为标题、列表、链接等格式；
JavaScript/HTML代码块拥有GitHub Dark风格的语法高亮，关键字、注释、字符串颜色区分清晰。
📸 效果演示（配图说明）
配图1：Markdown渲染整体效果
（说明：Markdown文本被完整解析，标题、列表、链接格式清晰，代码块高亮效果显著。）
配图2：代码高亮细节
（说明：JavaScript代码中关键字（import、const）、注释、字符串分别用不同颜色标注，可读性大幅提升。）
配图3：访问demo地址
体验地址：http://vue3js.mameihua.top:8075/home
🌟 初学者必知的进阶技巧
1. 切换highlight.js样式
highlight.js提供了几十种预设样式，只需替换引入的CSS文件即可：
// 常用样式推荐import'highlight.js/styles/vscode.css'// VSCode默认风格import'highlight.js/styles/atom-one-light.css'// Atom浅色风格import'highlight.js/styles/solarized-dark.css'// 暗黑风格更多样式参考：https://highlightjs.org/static/demo/
2. 扩展markdown-it功能（可选）
markdown-it支持插件扩展，比如支持表格、Emoji等：
# 安装表格插件npm install markdown-it-table --save// 在初始化markdown-it时引入插件import mdTable from'markdown-it-table'md.value = newMarkdownIt({...}).use(mdTable)3. 处理大段Markdown文本
如果Markdown文本很长（如整篇博客），建议通过异步请求从后端获取，再传入组件：
import { onMounted } from'vue'import axios from'axios'const markdownText = ref('')onMounted(async () => {// 从后端接口获取Markdown文本const res = await axios.get('/api/article/1') markdownText.value = res.data.content})4. 避免XSS攻击
由于使用了v-html渲染HTML，若Markdown文本来自用户输入，需做XSS过滤：
# 安装XSS过滤插件npm install xss --saveimport xss from'xss'// 在解析后过滤XSSconst renderedHtml = computed(() => {if (!md.value || !props.content) return''const html = md.value.render(props.content)returnxss(html) // 过滤危险标签/属性})🎯 优缺点总结（初学者避坑）
优点
轻量高效：markdown-it体积小，解析速度快，不影响项目性能；
样式丰富：highlight.js内置多种高亮样式，满足不同场景需求；
高度可扩展：markdown-it支持插件扩展，可按需增加表格、TOC、Emoji等功能；
组件化复用：封装成组件后，可在项目中任意地方调用，维护成本低。
缺点&注意事项
XSS风险：
v-html渲染HTML存在XSS风险，用户输入的内容必须做过滤；样式适配：渲染后的Markdown元素需要手动适配样式（如标题、段落间距）；
不支持编辑：该方案仅用于渲染Markdown，若需要在线编辑，需搭配
mavon-editor等编辑器组件。
✨ 总结
通过markdown-it+highlight.js，我们仅需几十行代码就能在Vue3项目中实现专业的Markdown渲染和代码高亮效果。核心步骤：
安装依赖 → 封装渲染组件 → 配置高亮逻辑；
父组件传入Markdown文本，组件自动解析渲染；
按需扩展样式和功能，处理XSS风险。
这个方案是前端展示Markdown内容的主流做法，初学者掌握后，可直接用于博客、文档系统、技术社区等项目。快去试试吧，如果有任何问题，欢迎在评论区交流～ 关注我，后续分享更多Vue3实战技巧！
总结：
前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。
--- ✨关注我：前端路上不迷路 ---
Vue3 Hooks封装实战：告别重复代码，写出高复用、高质量的自定义Hook
