高等前端进阶
本日给大家带来的主题是盘点2023年全网最火的 markdown 解析器和编译器，话不多说，直接进入正题。
1.Marked.js1.1 什么是marked.jsmarked.js是markdown解析器和编译器，其具有以下明显上风：
在浏览器中可以通过如下方法利用:
<!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 browser\n\nRendered by marked.'); </script></body></html>
如果是Node等做事端环境中须要先导入marked.js库才能利用：
import { marked } from 'marked';// or const { marked } = require('marked');const html = marked.parse('# Marked in Node.js\n\nRendered 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-itmarkdown-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.remarkableremarkable具有以下明显特点：
支持 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 valuesvar 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.ShowdownShowdown 是一个 Javascript Markdown 到 HTML 转换器，基于 John Gruber 的原创作品。Showdown可以用于客户端（在浏览器中）或做事器端（利用 NodeJs）环境。
ShowdownJS 是一个永久免费的库。ShowdownJS v 2.0 在 MIT 版本下发布，而以前的版本是在 BSD 下发布的。
ShowdownJS已成功通过大多数浏览器的测试：
Firefox 1.5 和 2.0Chrome 12.0Internet Explorer 6 和 7Safari 2.0.4Opera 8.54 和 9.10Netscape 8.1.2Konqueror 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.commonmarkCommonMark 是 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 StringParser 和 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 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/
