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

原创于 2025-12-05 15:29:33 发布 · 1.2k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #大剑师 #markdown

Vue2实战指南专栏收录该内容

120 篇文章

订阅专栏

热门推荐	内容链接
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 组件中使用

<template>
  <div class="markdown-content" v-html="compiledMarkdown"></div>
</template>

<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.md
      this.markdownContent = await response.text();
    } catch (error) {
      console.error('Failed to load Markdown file:', error);
    }
  }
};
</script>

<style scoped>
/* 可选：添加基本的 Markdown 样式 */
.markdown-content {
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.markdown-content h1 { font-size: 2em; margin: 0.67em 0; }
.markdown-content p { margin: 1em 0; }
.markdown-content code {
  background-color: #f5f5f5;
  padding: 2px 4px;
  border-radius: 3px;
}
.markdown-content pre {
  background-color: #f5f5f5;
  padding: 1em;
  overflow-x: auto;
}
/* 更多样式可参考 GitHub Markdown CSS */
</style>

🔧 其他常见场景

场景 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 看起来美观