2023年全网最火的前端5大 markdown 解析器与编译器！

2023-08-20 今日头条高级前端进阶

加入收藏

今天给大家带来的主题是盘点2023年全网最火的 markdown 解析器和编译器，话不多说，直接进入正题。

1.Marked.js

1.1 什么是marked.js

marked.js是markdown解析器和编译器，其具有以下明显优势：

⚡ 为速度而生
⬇️ 用于解析 markdown 的底层编译器，无需缓存或长时间阻塞
⚖️ 轻量级，同时实现支持的风格和规格的所有markdown功能
可以在浏览器、服务器或命令行界面 (CLI) 中工作

1.2 marked.js使用

在浏览器中可以通过如下方法使用:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.NET/npm/marked/marked.min.js"></script>
  // 引入CDN
  <script>
    document.getElementById('content').innerHTML =
      marked.parse('# Marked in browsernnRendered by **marked**.');
  </script>
</body>
</html>

如果是Node等服务端环境中需要先导入marked.js库才能使用：

import { marked } from 'marked';
// or const { marked } = require('marked');
const html = marked.parse('# Marked in Node.jsnnRendered by **marked**.');

需要注意的是， Marked 不会清理输出的 HTML。如果需要处理可能不安全的字符串，过滤可能的 XSS 攻击很重要。一些过滤选项包括 DOMPurify（推荐）、js-xss、sanitize-html 和输出 HTML 上的 insane！

DOMPurify.sanitize(marked.parse(`<img src="x" onerror="alert('not hAppening')">`));

目前marked.js在Github上有超过29.5k的star、3.3k的fork、超过950k的项目依赖量，代码贡献者160+，是妥妥的前端明星项目。

2.markdown-it

markdown-it 是前端明星项目 Markdoc 的解析器， Markdoc 使用 markdown-it 作为标记器，从 markdown-it 输出的标记数组构建抽象语法树 (AST)。

Markdown-it 解析器的特性包括：

具有 100% CommonMark 支持、扩展支持
可配置的语法
可以添加扩展的新规则，甚至替换现有规则
高速快且默认安全
大量 npm 上社区编写的插件和其他包

可以使用下面的示例快速使用 markdown-it：

// node.js经典方式
var MarkdownIt = require('markdown-it'),
  md = new MarkdownIt();
var result = md.render('# markdown-it rulezz!');

// node.js的语法糖
var md = require('markdown-it')();
var result = md.render('# markdown-it rulezz!');

// 没有 AMD 的浏览器，在脚本加载时添加到 window
// 注意，“markdownit”中没有破折号。
var md = window.markdownit();
var result = md.render('# markdown-it rulezz!');

单行渲染，没有段落换行的情况下可以使用如下方式：

var md = require('markdown-it')();
var result = md.renderInline('__markdown-it__ rulezz!');

markdown-it 是贡献了 99% Remarkable 代码的作者，其决定转移到一个具有相同作者身份但有新领导的项目（Vitaly 和 Alex）的结果，不是对Remarkable的简单fork。

目前 Markdown-it 在 Github 上有 15.2k 的 star、1.6k 的 fork、433k 的项目依赖它，代码贡献者76+，妥妥的前端明星项目。

3.remarkable

remarkable具有以下明显特点：

支持 CommonMark 规范 + 语法扩展 + 语法糖（URL 自动链接等）。
可配置的语法，开发者还可以添加新规则，甚至替换现有规则。
速度快
npm 上大量的社区插件

npm下载remarkable并导入代码后就可以直接使用，比如下面的代码示例：

import { Remarkable } from 'remarkable';
var md = new Remarkable();

console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>

默认情况下，remarkable的配置类似于 GFM，但禁用了 HTML。如果需要不同的设置，也很容易更改，有两种定义选项的方法。第一种就是在构造函数中使用：

// Actual default values
var md = new Remarkable({
  html:         false,        // Enable HTML tags in source
  xhtmlOut:     false,        // Use '/' to close single tags (<br />)
  breaks:       false,        // Convert 'n' in paragraphs into <br>
  langPrefix:   'language-',  // css language prefix for fenced blocks

  // Enable some language-neutral replacement + quotes beautification
  typographer:  false,

  // Double + single quotes replacement pAIrs, when typographer enabled,
  // and smartquotes on. Set doubles to '«»' for Russian, '„“' for German.
  quotes: '“”‘’',

  // Highlighter function. Should return escaped HTML,
  // or '' if the source string is not changed
  highlight: function (/*str, lang*/) { return ''; }
});

console.log(md.render('# Remarkable rulezz!'));
// => <h1>Remarkable rulezz!</h1>

或者通过 .set() 方法定义选项：

import { Remarkable } from 'remarkable';
var md = new Remarkable();
md.set({
  html: true,
  breaks: true
});

目前 remarkable 在 Github 上有 5.5k 的 star、400+ 的 fork、49.9k 的项目依赖它，代码贡献者40+，是一个值得关注的前端项目。

4.Showdown

Showdown 是一个 JAVAscript Markdown 到 HTML 转换器，基于 John Gruber 的原创作品。Showdown可以用于客户端（在浏览器中）或服务器端（使用 NodeJs）环境。

ShowdownJS 是一个永远免费的库。ShowdownJS v 2.0 在 MIT 版本下发布，而以前的版本是在 BSD 下发布的。

ShowdownJS已成功通过大多数浏览器的测试：

Firefox 1.5 和 2.0
Chrome 12.0
Internet Explorer 6 和 7
Safari 2.0.4
Opera 8.54 和 9.10
Netscape 8.1.2
Konqueror 3.5.4

理论上，Showdown 可以在任何支持 ECMA 262 第三版 (JavaScript 1.5) 的浏览器中运行。转换器本身甚至可以在非网络浏览器的环境中工作，例如 Acrobat。

Showdown 支持Current、Active和Maintenance阶段的 Node 版本。目前包括 Node 12.x、14.x、16.x 和 17.x。

可以使用下面代码将Markdown转化为HTML：

var showdown  = require('showdown'),
    converter = new showdown.Converter(),
    text      = '# hello, markdown!',
    html      = converter.makeHtml(text);

如果需要将HTML转化为Markdown也是可以的：

var showdown  = require('showdown'),
    converter = new showdown.Converter(),
    html      = '<a href="https://patreon.com/showdownjs">Please Support us!</a>',
    md        = converter.makeMarkdown(text);

目前 Showdown 在 Github 上有 13.2k 的 star、1.6k+ 的 fork、55.2k 的项目依赖它，代码贡献者78+，是一个值得长期关注的前端明星项目。

5.commonmark

CommonMark 是 Markdown 语法的版本，具有规范和 BSD 许可的 C 和 JavaScript 参考实现。有关详细信息，可以参阅 http://commonmark.org。

CommonMark 存储库包含了 JavaScript 参考实现，它提供了一个库，其中包含将 CommonMark 文档解析为抽象语法树 (AST)、操作 AST 以及将文档渲染为 HTML 或 AST 的 XML 表示的函数。

要在不安装该库的情况下使用它，请参阅
http://try.commonmark.org/ 上的实时 dingus。

commonmark.js 不像大多数转换器那样将 Markdown 直接转换为 HTML，而是将 Markdown 解析为 AST（抽象语法树），然后将此 AST 渲染为 HTML。这开启了在解析和渲染之间操纵 AST 的可能性。例如，可以将字母全部转换为大写。

下面是一个基本的用法示例：

var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse("Hello *world*"); // parsed is a 'Node' tree
// transform parsed if you like...
var result = writer.render(parsed); // result is a String

Parser 和 HtmlRenderer 的构造函数可以采用不同的可选项参数来进一步扩展能力，比如下面的smart和sourcepos，关于参数的具体含义可以进一步查看文末资料。

var reader = new commonmark.Parser({smart: true});
var writer = new commonmark.HtmlRenderer({sourcepos: true});

commonmark.js 性能非常好，与marked大致相当。在转换一个 11 MB Markdown 文件的基准测试中，该文件是通过命令行工具 Scott Chacon 将 Pro Git 第一版的所有本地化的 Markdown 源串联起来构建的，commonmark 仅比 C 程序折扣慢一点，比 php Markdown 快大约十倍，比 Python/ target=_blank class=infotextkey>Python Markdown 快一百倍，比 Markdown.pl 快一千多倍。

以下是四个 JavaScript 库的一些重点基准测试（使用 2015 年 1 月 24 日可用的版本）。他们测试了不同种类的 Markdown 文本的性能。（这些样本中的大部分都取自 markdown-it 存储库。）结果显示了 ops/second（越高越好）与 showdown（通常是最慢的实现）的比率。版本：showdown 1.3.0，marked 0.3.5，commonmark.js 0.22.1，markdown-it 5.0.2，node 5.3.0。硬件：1.6GHz Intel Core i5，mac OSX。

目前 commonmark.js 在 Github 上有 1.3k 的 star、230+ 的 fork、12.5k 的项目依赖它，代码贡献者40+，是一个值得长期关注的前端项目。

本文总结

本文主要和大家盘点2023年全网最火的 markdown 解析器和编译器，如：marked.js、markdown-it 、remarkable等。因为篇幅原因，本文并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/markedjs/marked

https://marked.js.org/

https://github.com/markdown-it/markdown-it

https://github.com/remarkjs/remark/tree/main

https://www.91temaichang.com/2023/03/18/the-marked-and-markdownit/

https://github.com/jonschlinkert/remarkable

https://github.com/commonmark/commonmark.js

https://github.com/showdownjs/showdown

https://www.npmjs.com/package/showdown

https://www.markdownguide.org/getting-started/