前端如何渲染 Markdown 格式：从基础到实战全指南（2026 最新版）

在现代 Web 开发中，Markdown 已成为内容创作的标准格式：博客、文档、评论、AI 输出、README 等场景随处可见。前端渲染 Markdown 的核心目标是：将 Markdown 字符串安全、高效、美观地转换为 HTML，并支持实时预览、代码高亮、数学公式、表格、任务列表等扩展语法。

本文从零基础到实战项目，一步步带你掌握前端 Markdown 渲染全流程，适合前端萌新和中高级开发者。

1. Markdown 渲染核心原理

Markdown 本质是纯文本 → 需要一个 Parser（解析器） 将其转换为 HTML。

渲染流程：

1. 输入 Markdown 字符串。
2. Parser 解析语法（标题、加粗、列表、代码块等）→ 生成 HTML。
3. 将 HTML 插入 DOM（innerHTML 或 React/Vue 组件）。
4. 可选：代码高亮（Highlight.js / Prism.js）、数学公式（KaTeX / MathJax）、样式美化（GitHub / Typora 风格 CSS）。

安全注意：直接 innerHTML 有 XSS 风险（用户输入恶意 <script>）。生产环境必须净化 HTML（DOMPurify）或使用组件库直接转 React/Vue 元素。

（上图展示 Markdown 源代码与渲染后的对比效果）

2. 纯 Vanilla JS 基础实现（最轻量，适合入门）

使用 Marked.js（目前最流行、速度最快之一，支持 GFM）。

步骤 1：引入库（CDN 或 npm）

<!-- CDN 方式（快速测试） -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>

步骤 2：HTML 结构（实时预览编辑器）

<div class="container">
  <textarea id="editor" placeholder="在这里输入 Markdown..."></textarea>
  <div id="preview"></div>
</div>

步骤 3：JavaScript 核心代码

const editor = document.getElementById('editor');
const preview = document.getElementById('preview');

// 配置 Marked
marked.setOptions({
  breaks: true,        // 支持 GitHub Flavored Markdown 换行
  gfm: true,           // 启用 GFM（表格、任务列表、删除线等）
  headerIds: false
});

// 实时渲染
function renderMarkdown() {
  let html = marked.parse(editor.value);
  
  // 安全净化（强烈推荐生产环境使用）
  // html = DOMPurify.sanitize(html);  // 需要引入 DOMPurify
  
  preview.innerHTML = html;
  
  // 代码高亮
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightElement(block);
  });
}

// 输入事件监听
editor.addEventListener('input', renderMarkdown);

// 初始化示例内容
editor.value = `# 你好，Markdown！\n\n**粗体** 和 *斜体*。\n\n\`\`\`js\nconsole.log('前端渲染 Markdown 真简单！');\n\`\`\``;
renderMarkdown();

CSS 美化（让预览像 Typora 一样好看）：

.container { display: flex; gap: 20px; }
#editor, #preview { flex: 1; min-height: 600px; padding: 20px; border: 1px solid #ddd; }
#preview { background: #fff; line-height: 1.8; }
#preview h1, #preview h2 { border-bottom: 1px solid #eee; }

（上图为典型 Markdown 编辑器 + 实时预览界面）

3. 常用库对比与推荐（2026 最新）

库	适合场景	优点	缺点	推荐指数
Marked	纯 JS / 轻量项目	速度极快、简单、GFM 支持好	需要额外处理安全	★★★★★
markdown-it	需要大量插件	插件生态丰富、规范严格	稍重	★★★★☆
Showdown	老项目	历史悠久	更新较慢	★★★☆☆
react-markdown	React 项目	直接转 React 组件，无 XSS 风险	只限 React	★★★★★
remark + rehype	高级定制（MDX）	AST 转换、插件 300+	学习曲线陡	★★★★☆

React 项目推荐：

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

<ReactMarkdown
  remarkPlugins={[remarkGfm]}
  components={{
    code({node, inline, className, children, ...props}) {
      return !inline ? <SyntaxHighlighter language="js" {...props}>{children}</SyntaxHighlighter> : <code>{children}</code>;
    }
  }}
>
  {markdown}
</ReactMarkdown>

4. 进阶功能实战

(1) 代码语法高亮

• Highlight.js 或 Prism.js（Prism 更轻量现代）。
• 支持 100+ 语言，主题丰富（github、atom-one-dark 等）。

(2) 数学公式支持

使用 KaTeX（更快）或 MathJax：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>

在 Marked 配置中结合 marked-katex 插件，或在 React 中用 rehype-katex。

(3) 表格、任务列表、删除线（GFM）

Marked / markdown-it 默认支持，开启 gfm: true 即可。

(4) 图片懒加载 & 自适应

在渲染后遍历 img 标签添加 loading="lazy" 和样式。

(5) 安全防护（必做！）

import DOMPurify from 'dompurify';
const cleanHtml = DOMPurify.sanitize(marked.parse(md));

5. 完整实战项目：Markdown 编辑器（复制即用）

创建一个 Split 布局的在线编辑器：

• 左侧编辑区（textarea 或 CodeMirror / Monaco Editor 更专业）。
• 右侧实时预览。
• 支持导出 HTML / PDF（用 jsPDF 或 html2canvas）。
• 暗黑模式切换。

推荐工具升级：

• 编辑器：Vditor（功能最全，开箱即用，支持渲染 + 编辑）、Toast UI Editor、Bytemd（Vue/React 友好）。
• 完整方案：Vite + React + react-markdown + Tailwind CSS。

部署建议：

• Vercel / Netlify 一键部署。
• 后端存储 Markdown（Supabase / Firebase），前端渲染。

6. 常见问题与最佳实践

• 性能：大文档用虚拟滚动或分块渲染。
• SEO：服务端渲染（Next.js / Nuxt）时用 remark 在服务端解析。
• 移动端：响应式布局，触摸优化。
• 自定义样式：用 GitHub Markdown CSS 或 Tailwind 覆写 h1、pre 等。
• XSS 防护：永远不要信任用户输入的 Markdown。
• 国际化：支持中文标题、链接等无压力。

学习路径：

1. 先用 Marked + 纯 JS 实现基础预览。
2. 加入高亮 + KaTeX。
3. 迁移到 React/Vue 组件库。
4. 集成高级编辑器（如 Vditor）。
5. 构建完整博客/文档系统。

通过这个指南，你已经可以轻松在任何前端项目中渲染 Markdown 了！无论是个人博客、在线文档、AI 聊天记录展示，还是企业知识库，都能做出专业效果。

需要完整可运行 GitHub 仓库代码（Vite + React 版）、Vditor 完整集成示例、支持 Math + Mermaid 图表、Next.js 服务端渲染版，或者如何在 Vue3 / Svelte 中实现，随时告诉我，我继续给你详细代码和优化技巧！

快去试试吧，前端渲染 Markdown 真的超级实用且有成就感！✨