今天給大家?guī)淼闹黝}是盤點2023年全網(wǎng)最火的 markdown 解析器和編譯器，話不多說，直接進入正題。

1.Marked.js

1.1 什么是marked.js

marked.js是markdown解析器和編譯器，其具有以下明顯優(yōu)勢：

? 為速度而生
?? 用于解析 markdown 的底層編譯器，無需緩存或長時間阻塞
?? 輕量級，同時實現(xiàn)支持的風(fēng)格和規(guī)格的所有markdown功能
可以在瀏覽器、服務(wù)器或命令行界面 (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等服務(wù)端環(huán)境中需要先導(dǎo)入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 輸出的標記數(shù)組構(gòu)建抽象語法樹 (AST)。

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

具有 100% CommonMark 支持、擴展支持
可配置的語法
可以添加擴展的新規(guī)則，甚至替換現(xiàn)有規(guī)則
高速快且默認安全
大量 npm 上社區(qū)編寫的插件和其他包

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

// node.js經(jīng)典方式
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 代碼的作者，其決定轉(zhuǎn)移到一個具有相同作者身份但有新領(lǐng)導(dǎo)的項目（Vitaly 和 Alex）的結(jié)果，不是對Remarkable的簡單fork。

目前 Markdown-it 在 Github 上有 15.2k 的 star、1.6k 的 fork、433k 的項目依賴它，代碼貢獻者76+，妥妥的前端明星項目。

3.remarkable

remarkable具有以下明顯特點：

支持 CommonMark 規(guī)范 + 語法擴展 + 語法糖（URL 自動鏈接等）。
可配置的語法，開發(fā)者還可以添加新規(guī)則，甚至替換現(xiàn)有規(guī)則。
速度快
npm 上大量的社區(qū)插件

npm下載remarkable并導(dǎo)入代碼后就可以直接使用，比如下面的代碼示例：

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

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

默認情況下，remarkable的配置類似于 GFM，但禁用了 HTML。如果需要不同的設(shè)置，也很容易更改，有兩種定義選項的方法。第一種就是在構(gòu)造函數(shù)中使用：

// 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+，是一個值得關(guān)注的前端項目。

4.Showdown

Showdown 是一個 JAVAscript Markdown 到 HTML 轉(zhuǎn)換器，基于 John Gruber 的原創(chuàng)作品。Showdown可以用于客戶端（在瀏覽器中）或服務(wù)器端（使用 NodeJs）環(huán)境。

ShowdownJS 是一個永遠免費的庫。ShowdownJS v 2.0 在 MIT 版本下發(fā)布，而以前的版本是在 BSD 下發(fā)布的。

ShowdownJS已成功通過大多數(shù)瀏覽器的測試：

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) 的瀏覽器中運行。轉(zhuǎn)換器本身甚至可以在非網(wǎng)絡(luò)瀏覽器的環(huán)境中工作，例如 Acrobat。

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

可以使用下面代碼將Markdown轉(zhuǎn)化為HTML：

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

如果需要將HTML轉(zhuǎn)化為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+，是一個值得長期關(guān)注的前端明星項目。

5.commonmark

CommonMark 是 Markdown 語法的版本，具有規(guī)范和 BSD 許可的 C 和 JavaScript 參考實現(xiàn)。有關(guān)詳細信息，可以參閱 http://commonmark.org。

CommonMark 存儲庫包含了 JavaScript 參考實現(xiàn)，它提供了一個庫，其中包含將 CommonMark 文檔解析為抽象語法樹 (AST)、操作 AST 以及將文檔渲染為 HTML 或 AST 的 XML 表示的函數(shù)。

要在不安裝該庫的情況下使用它，請參閱
http://try.commonmark.org/ 上的實時 dingus。

commonmark.js 不像大多數(shù)轉(zhuǎn)換器那樣將 Markdown 直接轉(zhuǎn)換為 HTML，而是將 Markdown 解析為 AST（抽象語法樹），然后將此 AST 渲染為 HTML。這開啟了在解析和渲染之間操縱 AST 的可能性。例如，可以將字母全部轉(zhuǎn)換為大寫。

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

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 的構(gòu)造函數(shù)可以采用不同的可選項參數(shù)來進一步擴展能力，比如下面的smart和sourcepos，關(guān)于參數(shù)的具體含義可以進一步查看文末資料。

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

commonmark.js 性能非常好，與marked大致相當。在轉(zhuǎn)換一個 11 MB Markdown 文件的基準測試中，該文件是通過命令行工具 Scott Chacon 將 Pro Git 第一版的所有本地化的 Markdown 源串聯(lián)起來構(gòu)建的，commonmark 僅比 C 程序折扣慢一點，比 php Markdown 快大約十倍，比 Python/ target=_blank class=infotextkey>Python Markdown 快一百倍，比 Markdown.pl 快一千多倍。

以下是四個 JavaScript 庫的一些重點基準測試（使用 2015 年 1 月 24 日可用的版本）。他們測試了不同種類的 Markdown 文本的性能。（這些樣本中的大部分都取自 markdown-it 存儲庫。）結(jié)果顯示了 ops/second（越高越好）與 showdown（通常是最慢的實現(xiàn)）的比率。版本：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+，是一個值得長期關(guān)注的前端項目。

本文總結(jié)

本文主要和大家盤點2023年全網(wǎng)最火的 markdown 解析器和編譯器，如：marked.js、markdown-it 、remarkable等。因為篇幅原因，本文并沒有過多展開，如果有興趣，可以在我的主頁繼續(xù)閱讀，同時文末的參考資料提供了優(yōu)秀文檔以供學(xué)習(xí)。最后，歡迎大家點贊、評論、轉(zhuǎn)發(fā)、收藏！

參考資料

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/

亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

2023年全網(wǎng)最火的前端5大 markdown 解析器與編譯器！1.Marked.js1.1 什么是marked.js1.2 marked.js使用2.markdown-it3.remarkable4

1.Marked.js

1.1 什么是marked.js

1.2 marked.js使用

2.markdown-it

3.remarkable

4.Showdown

5.commonmark

本文總結(jié)

參考資料

數(shù)獨大挑戰(zhàn)2018-06-03

答題星2018-06-03

全階人生考試2018-06-03

運動步數(shù)有氧達人2018-06-03

每日養(yǎng)生app2018-06-03

體育訓(xùn)練成績評定2018-06-03

亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

2023年全網(wǎng)最火的前端5大 markdown 解析器與編譯器！1.Marked.js1.1 什么是marked.js1.2 marked.js使用2.markdown-it3.remarkable4

1.Marked.js

1.1 什么是marked.js

1.2 marked.js使用

2.markdown-it

3.remarkable

4.Showdown

5.commonmark

本文總結(jié)

參考資料

數(shù)獨大挑戰(zhàn)2018-06-03

答題星2018-06-03

全階人生考試2018-06-03

運動步數(shù)有氧達人2018-06-03

每日養(yǎng)生app2018-06-03

體育訓(xùn)練成績評定2018-06-03

2023年全網(wǎng)最火的前端5大 markdown 解析器與編譯器！1.Marked.js1.1 什么是marked.js1.2 marked.js使用2.markdown-it3.remarkable4