当前位置：首页 > news >正文

markdown文件在vue网页上正确显示的方式（marked + DOMPurify）

news 2026/3/26 20:57:09

热门推荐	内容链接
1	openlayers 从基础到精通，300+代码示例
2	leaflet 热门分解学习教程，150+图文示例
3	cesium 从0到1学习指南，200+代码示例
4	mapboxGL 从入门到实战，150+图文示例
5	canvas 示例应用100+，揭密底层细节
6	javascript从基础到高级，示例展示200+
7	vue2 实战指南，100+个细节深度剖析

要在网页上正确显示 Markdown 文件的内容（即把 .md 文件渲染成格式化的 HTML），你需要完成两个主要步骤：

读取 Markdown 文件内容（通常是字符串）
将 Markdown 字符串转换为 HTML 并安全地插入页面

下面以 Vue 2 项目为例，说明如何实现这一功能。

推荐方案：使用 `marked` + `DOMPurify`（安全高效）

第一步：安装依赖

npm install marked dompurify

marked：将 Markdown 转为 HTML
DOMPurify：防止 XSS 攻击（非常重要！因为直接插入 HTML 可能有安全风险）

如果你不需要处理用户上传的 Markdown（比如只显示自己写的静态文档），可酌情省略 DOMPurify，但强烈建议保留。

第二步：在 Vue 组件中使用


<script>
import marked from 'marked';
import DOMPurify from 'dompurify';
export default {data() {return {markdownContent: '' // 存放原始 Markdown 字符串};},computed: {compiledMarkdown() {const rawHtml = marked(this.markdownContent);return DOMPurify.sanitize(rawHtml); // 清洗 HTML 防止 XSS}},async mounted() {// 示例：从本地 public 目录加载 .md 文件try {const response = await fetch('/docs/example.md'); // 假设文件放在 public/docs/example.mdthis.markdownContent = await response.text();} catch (error) {console.error('Failed to load Markdown file:', error);}}
};
</script>

其他常见场景

场景 1：Markdown 文件放在 `public/` 目录下

在 Vue CLI 或 Vite 项目中，public/ 下的文件会被直接复制到构建输出目录。
你可以通过 fetch('/your-file.md') 直接请求（注意路径）。

场景 2：Markdown 内容来自 API

只需把 fetch 替换为你的 API 请求即可：

const res = await axios.get('/api/article/123');
this.markdownContent = res.data.content;

场景 3：使用高亮代码（如 Prism.js 或 highlight.js）

marked 支持自定义代码渲染。例如配合 highlight.js：

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css'; // 引入样式
marked.setOptions({
highlight: function(code, lang) {
const language = hljs.getLanguage(lang) ? lang : 'plaintext';
return hljs.highlight(code, { language }).value;
},
langPrefix: 'hljs language-' // 确保 class 名匹配
});

安全警告

永远不要直接用 v-html 显示未经清洗的用户输入！
即使是你自己的 Markdown，如果包含 <script>、onerror 等恶意内容，也会被浏览器执行。

所以务必使用 DOMPurify.sanitize()！

总结

步骤	操作
1	用 `fetch` 或 API 获取 `.md` 文件内容（字符串）
2	用 `marked` 转成 HTML
3	用 `DOMPurify` 清洗 HTML
4	用 `v-html` 渲染到页面
5	添加 CSS 样式让 Markdown 看起来美观