在前端开发中,我们常会遇到 Markdown 和 Marked 这两个词。它们名字相似,但并不是同一类东西,也不是互相替代的选项。
简单来说:
Markdown 是一种轻量级标记语言;Marked 是一个用于解析 Markdown 的 JavaScript 库。
理解这一点,就能知道它们通常不是"二选一",而是配合使用。
什么是 Markdown?
Markdown 是一种用简单符号编写文本内容的语法。它可以表示标题、列表、链接、代码块等结构,常用于 README、技术文档、博客和评论内容。
例如:
markdown
# 页面标题
这是一段文字,包含**加粗内容**。
- 第一项
- 第二项
[访问示例网站](https://example.com)
Markdown 文件通常使用 .md 或 .markdown 后缀。它的重点是内容如何编写和组织,而不是由哪种编程语言处理。
什么是 Marked?
Marked 是一个 JavaScript Markdown 解析器。它可以读取 Markdown 文本,并将其转换为 HTML。
ini
import { marked } from 'marked';
const source = '# 页面标题\n\n这是一段 **加粗内容**。';
const html = marked.parse(source);
console.log(html);
输出大致如下:
css
<h1>页面标题</h1>
<p>这是一段 <strong>加粗内容</strong>。</p>
Marked 关注的是如何在 JavaScript 项目中解析 Markdown。它常用于网站、Web 应用或 Node.js 服务中。
核心区别
| 对比项 | Markdown | Marked |
|---|---|---|
| 本质 | 一种轻量级标记语言 | JavaScript 解析库 |
| 用途 | 编写和组织内容 | 将 Markdown 转换为 HTML |
| 是否依赖某种编程语言 | 否 | 是,主要用于 JavaScript 环境 |
| 常见形式 | .md 文件或 Markdown 文本 |
npm 包 |
| 是否可以互相替代 | 不能 | 不能 |
可以把它们类比为:
- Markdown 像一种文章写作格式;
- Marked 像一个能够读懂这种格式并生成网页内容的转换工具。
实际开发中怎么选?
需要编写内容时,使用 Markdown
如果你要写项目说明、技术文档、博客文章或知识库内容,直接使用 Markdown 即可。它易读、易写,也方便进行版本管理。
需要在 JavaScript 中解析 Markdown 时,选择 Marked
如果项目需要把 Markdown 内容转换为 HTML,例如:
- 在前端展示 Markdown 文章;
- 在博客系统中渲染文章内容;
- 在后台或构建脚本中生成 HTML;
- 为 Markdown 编辑器提供预览功能;
就可以使用 Marked 等解析器。
两者通常一起使用
一个常见流程是:
css
Markdown 文本 → Marked 解析 → HTML → 页面展示
也就是说,内容使用 Markdown 编写,再由 Marked 将内容转换为网页可以展示的 HTML。
使用 Marked 时要注意安全
Marked 负责解析 Markdown,但不要默认认为它会过滤所有不安全的 HTML。如果 Markdown 内容来自用户输入,转换后的 HTML 可能包含恶意标签或脚本。
建议在插入页面前使用 HTML 清理工具,例如 DOMPurify:
ini
import { marked } from 'marked';
import DOMPurify from 'dompurify';
const markdown = '# 文章标题\n\n这是一段内容。';
const html = marked.parse(markdown);
const safeHtml = DOMPurify.sanitize(html);
// 在框架模板中展示 safeHtml,具体方式取决于所用框架
是否需要清理,取决于内容来源和展示方式。对于用户提交的内容,通常应进行安全处理。
总结
Markdown 和 Marked 不是两个同类产品:
- Markdown 是编写内容的语法;
- Marked 是解析 Markdown 的 JavaScript 工具。
因此,选择时不必简单地在两者之间做取舍:写文档或文章时使用 Markdown;需要在 JavaScript 项目中解析这些内容时,再考虑使用 Marked。