今天給大家帶來的主題是盤點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。