在前端生态中，Markdown 渲染方案的选择通常围绕“能力边界、扩展性、生态成熟度以及与框架的契合度”展开。marked、markdown-it 与 react-markdown 是当前较为主流的三种方案，它们分别代表了“轻量解析器”“插件驱动解析器”与“React 组件化渲染”的三种不同设计哲学。以下从多个维度进行系统对比分析。
一、整体定位与设计理念
1. marked
marked 是一个轻量级 Markdown 解析器，核心目标是“快速、简单地将 Markdown 转换为 HTML”。其设计强调性能与最小依赖，适用于对渲染控制要求不高的场景。
👉 核心特点：
- 直接输出 HTML 字符串
- API 简单，上手成本低
- 不内置复杂插件体系
2. markdown-it
markdown-it 是一个高度可扩展的 Markdown 解析引擎，强调“语法扩展能力”和“插件生态”。
👉 核心特点：
- Token 流解析机制（比字符串解析更灵活）
- 强大的插件系统（支持数学公式、脚注、目录等）
- 可定制渲染规则（renderer rules）
3. react-markdown
react-markdown 是一个基于 React 的 Markdown 渲染组件，核心理念是“将 Markdown 转换为 React 元素，而非 HTML 字符串”。
👉 核心特点：
- 输出 React Virtual DOM
- 天然避免 XSS（默认不使用 dangerouslySetInnerHTML）
- 与 React 生态（rehype / remark）深度集成
二、渲染机制对比
| 维度 | marked | markdown-it | react-markdown |
|---|---|---|---|
| 输出形式 | HTML 字符串 | HTML 字符串 | React 组件 |
| 渲染方式 | 字符串拼接 | Token → Renderer | AST → React |
| 安全性 | 需手动防 XSS | 可配置过滤 | 默认安全 |
| 控制粒度 | 低 | 高 | 非常高 |
👉 关键差异：
- marked / markdown-it → 面向“内容输出”
- react-markdown → 面向“组件渲染”
三、扩展能力与生态
marked
扩展能力较弱，主要通过：
- 自定义 renderer
- hook（有限）
👉 不适合复杂 Markdown 扩展需求
markdown-it
扩展能力极强：
常见插件包括：
- markdown-it-katex（数学公式）
- markdown-it-anchor（标题锚点）
- markdown-it-table-of-contents
👉 适合：
- 博客系统
- 文档平台
- 知识库系统
react-markdown
扩展基于生态：
- remark（Markdown AST）
- rehype（HTML AST）
常用插件：
- remark-gfm（GitHub 风格）
- rehype-highlight（代码高亮）
- rehype-katex（数学公式）
👉 优势：
- 插件链可组合（pipeline）
- 与 React 组件深度融合
四、安全性对比（重点）
marked
- 默认不安全
- 需配合 DOMPurify 等库
DOMPurify.sanitize(marked(md))
markdown-it
- 可关闭 HTML
- 可自定义过滤规则
markdownit({ html: false })
react-markdown
- 默认不会注入 HTML
- 安全性最高（设计层面）
👉 若开启 HTML：
需使用 rehype-raw（风险增加）
五、性能对比
| 场景 | 最优方案 |
|---|---|
| 大文本快速渲染 | marked |
| 中大型文档 + 扩展 | markdown-it |
| React 应用实时渲染 | react-markdown |
👉 结论：
- marked → 极致性能
- markdown-it → 性能与功能平衡
- react-markdown → 稍慢但更安全、结构化
六、与 React 生态的契合度
marked / markdown-it
在 React 中使用方式：
<div dangerouslySetInnerHTML={{ __html: html }} />
👉 问题：
- XSS 风险
- 无法组件化控制
react-markdown
<ReactMarkdown components={{
code: CodeBlock,
h1: CustomTitle
}}>
{content}
</ReactMarkdown>
👉 优势：
- 完全组件化
- 可插入业务逻辑
- 可控制每个标签
七、典型应用场景
marked
适用于：
- 简单博客渲染
- 后台 CMS
- 对安全要求不高的内部系统
👉 不推荐：
- 复杂交互系统
- 富文本平台
markdown-it
适用于：
- 文档系统（类似 Notion / Docs）
- 技术博客平台
- 支持扩展语法的系统
👉 是“通用型最优解”
react-markdown
适用于：
- React 项目（强推荐）
- ChatGPT 类对话系统
- 富交互内容（代码块、组件嵌入）
👉 是“前端工程化最优解”
八、学习成本与维护成本
| 维度 | marked | markdown-it | react-markdown |
|---|---|---|---|
| 学习成本 | 低 | 中 | 中 |
| 使用复杂度 | 低 | 中高 | 中 |
| 维护成本 | 低 | 中 | 中高 |
👉 说明：
- markdown-it 难在插件体系
- react-markdown 难在 unified 生态理解
九、一句话总结
- marked：快，但简单
- markdown-it：强，但偏底层
- react-markdown：现代 React 场景最佳实践
