今天给大家带来的主题是盘点2023年全网最火的 markdown 解析器和编译器,话不多说,直接进入正题。
marked.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 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+,是妥妥的前端明星项目。
markdown-it 是前端明星项目 Markdoc 的解析器, Markdoc 使用 markdown-it 作为标记器,从 markdown-it 输出的标记数组构建抽象语法树 (AST)。
Markdown-it 解析器的特性包括:
可以使用下面的示例快速使用 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+,妥妥的前端明星项目。
remarkable具有以下明显特点:
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+,是一个值得关注的前端项目。
Showdown 是一个 JAVAscript Markdown 到 HTML 转换器,基于 John Gruber 的原创作品。Showdown可以用于客户端(在浏览器中)或服务器端(使用 NodeJs)环境。
ShowdownJS 是一个永远免费的库。ShowdownJS v 2.0 在 MIT 版本下发布,而以前的版本是在 BSD 下发布的。
ShowdownJS已成功通过大多数浏览器的测试:
理论上,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+,是一个值得长期关注的前端明星项目。
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/