Vue3 中 Markdown 渲染与代码高亮实现

# 安装markdown-it（解析Markdown）npm install markdown-it --save# 安装highlight.js（代码高亮）npm install highlight.js --save

# 无需额外安装，直接在代码中引入官方CDN或本地样式即可

<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>

代码核心解析（初学者重点看）：

1. Props定义：content接收外部传入的Markdown文本，highlight控制是否开启代码高亮；

2. markdown-it初始化：配置breaks（换行）、linkify（自动识别链接），核心是highlight回调函数——调用highlight.js解析代码块；

3. computed计算属性：将Markdown文本解析为HTML字符串，通过v-html渲染到页面；

4. 样式适配：对渲染后的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）、注释、字符串分别用不同颜色标注，可读性大幅提升。）

体验地址：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 --save

import xss from'xss'// 在解析后过滤XSSconst renderedHtml = computed(() => {if (!md.value || !props.content) return''const html = md.value.render(props.content)returnxss(html) // 过滤危险标签/属性})

🎯 优缺点总结（初学者避坑）

优点

1. 轻量高效：markdown-it体积小，解析速度快，不影响项目性能；

2. 样式丰富：highlight.js内置多种高亮样式，满足不同场景需求；

3. 高度可扩展：markdown-it支持插件扩展，可按需增加表格、TOC、Emoji等功能；

4. 组件化复用：封装成组件后，可在项目中任意地方调用，维护成本低。

缺点&注意事项

1. XSS风险：v-html渲染HTML存在XSS风险，用户输入的内容必须做过滤；

2. 样式适配：渲染后的Markdown元素需要手动适配样式（如标题、段落间距）；

3. 不支持编辑：该方案仅用于渲染Markdown，若需要在线编辑，需搭配mavon-editor等编辑器组件。

✨ 总结

通过markdown-it+highlight.js，我们仅需几十行代码就能在Vue3项目中实现专业的Markdown渲染和代码高亮效果。核心步骤：

1. 安装依赖 → 封装渲染组件 → 配置高亮逻辑；

2. 父组件传入Markdown文本，组件自动解析渲染；

3. 按需扩展样式和功能，处理XSS风险。

这个方案是前端展示Markdown内容的主流做法，初学者掌握后，可直接用于博客、文档系统、技术社区等项目。快去试试吧，如果有任何问题，欢迎在评论区交流～ 关注我，后续分享更多Vue3实战技巧！

总结：

前端路上 | 所知甚少，唯善学。各位小伙伴有什么疑问，欢迎留言探讨。

--- ✨关注我：前端路上不迷路 ---

Vue3+TS+Vite 中后台管理系统、开箱即用

vue3+Electron+vite 搭建桌面端应用

Vue3路由实战：优雅封装+灵活拦截，解锁路由配置新姿势

Vue3 Hooks封装实战：告别重复代码，写出高复用、高质量的自定义Hook

3 分钟搞懂！Vue3 页面元素平滑上升功能

Vue3+Vite多环境配置实战：使用.env搞定不同环境域名

Vue3 状态管理新选择：Pinia 入门实战