2023年全網最火的前端5大 markdown 解析

2023年全網最火的前端5大 markdown 解析器與編譯器！

家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發!

高級前端?進階

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

arkdown是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然后轉換成有效的 XHTML（或者HTML）文檔。 Markdown 具有輕量化、易讀易寫的特性，并且對于圖片，圖表、數學式都有支持。

下面給大家分享5款方便好用的markdown編輯器工具，有需要的小伙伴可以收藏碼住！

1.迅捷markdown

一款在線markdown工具，在線工具的優點就是便攜，不需要安裝只需用瀏覽器打開之后簡單登錄，手機，電腦以及平板都可以使用，沒有平臺限制。

●支持導入 md文件、剪貼板內容和Gist在線文件。
●支持導出 Markdown文件(.md)、Html、原始Html、PDF、Word和Txt等多種格式文件

●快速切換多種編寫模式
編輯模式：可在工作臺沉浸式編輯您的筆記內容。
雙欄模式：左側編輯，右側查看，所見即所得。
預覽模式：為您自動生成排版，清晰呈現漂亮文檔。

●視覺主題，靈活編輯：
支持切換白天、夜間模式，還提供近10種精美主題，視覺體驗更舒適
支持切換sublime(默認)、emacs和vim3種編輯語言，滿足多種書慣。

●支持豐富的主流 Markdown 語法：
支持文字相關樣式、序號列表、任務列表、表格、TOC 目錄、多種圖表、數學公式、流程圖、時序圖、甘特圖等

●一鍵分享鏈接同步最新內容，多人實時在線查看，可針對不同團隊成員設置有效期和權限管理，安全可控。
●一鍵開啟演示文檔秒變PPT，通過演示模式，無需花費大量時間制作PPT文檔，也能清晰直觀地傳遞和表達。

2.Cmd Markdown

一款免費好用的在線Markdown編輯器，同樣是瀏覽器打開即可使用，你可以在任何地方，任何系統/設備上管理已編輯的文字內容。

●Cmd Markdown 的主界面一分為二，左邊為編輯區，右邊為預覽區，在編輯區的操作會實時地渲染到預覽區方便查看最終的版面效果，并且如果你在其中一個區拖動滾動條，另一個區的滾動會自動同步到相同的位置！

●編輯工具欄
在【編輯區】的頂部放置了一個如下圖所示的工具欄，可以使用鼠標在工具欄上調整格式、插入圖片、超鏈接等。

●實時的云端文稿為了保障數據安全，Cmd Markdown 會將每一次擊鍵的內容保存至云端，同時在編輯工具欄的最右側提示已保存的字樣，下一次回到 Cmd Markdown 的時候繼續寫作。

3.Marktext

一款開源免費的markdown編輯器，支持windows、macos、linux系統平臺。

●支持實時預覽、插入數學表達式以及高亮代碼 ●可以將文件輸出為HTML 和 PDF 文件,也可以直接從剪貼板粘貼圖像。

●6種主題：Cadmium Light、Graphite Light、Ulysses Light、Dark、Material Dark以及One Dark。

●3種編輯模式：Source Code mode(源碼模式)，Typewriter mode(打字機模式)，Focus mode(聚焦模式)。

4.obsidian

與前面幾款有所不同，obsidian與其說是一款markdown編輯器倒不如說是一款markdown的管理器，“第二大腦”的設計理念使得obsidian更加適合作為個人知識庫或是博客寫作平臺。

●它的雙鏈設計搭配上關系圖，使得obsidian在知識管理方面一騎絕塵，

●在大部分的markdown編輯器中，obsidian的插件體系也是非常不錯的，具有豐富的拓展性，配合插件可化身日記本、英語學習工具等。

5.Joplin

一款開源筆記markdown軟件，通過它創建的筆記可鏈接、可復制、可標記、可修改、圖像和其他文件也可以添加到筆記中，同時，圖像和其他文件也支持添加到筆記中。

●Joplin可以通過Nextcloud、Dropbox、OneDrive等云端數據庫來同步我們在手機、電腦或平板中的筆記數據，它還可以在windows、macos、一級linux之間流暢切換。

以上就是本次分享的全部內容啦，上面這幾款markdown編輯器大家可以根據需求去選擇使用呀！喜歡我的分享可以點贊告訴我喲~

isual Studio Code（簡稱VSCode）是一個由微軟開發的免費、開源的代碼編輯器。

VSCode 發布于 2015 年，而且很快就成為開發者社區中廣受歡迎的開發工具。

VSCode 可用于 Windows、macOS 和 Linux 等操作系統。

VSCode 擁有一個龐大的擴展市場，用戶可以根據自己的需要安裝各種擴展來增強編輯器的功能，包括語言支持、代碼格式化工具、版本控制集成、主題和圖標等。

我們可以在 VSCode 上輕松查找并安裝擴展：

接下來我們來看下2024 年開發人員必備 VS Code 插件：

1、Live Server

Live Server 插件為開發者提供了一個本地服務器，可以實時顯示 HTML、CSS 和 JavaScript 文件的修改。

Live Server 通過內置的本地服務器簡化了網頁開發和測試過程，使用這個擴展，你可以一鍵啟動服務，實時查看代碼更改的效果，從而提高開發效率。

擴展搜索關鍵詞：Live Server

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

效果演示：

2、Markdown All in One

Markdown All in One 為 Markdown 文件提供了增強的編輯體驗，包括實時預覽、快捷鍵、自動生成目錄、以及對 GitHub 風格 Markdown 的支持，使得 Markdown 文檔的編寫和閱讀更加高效和直觀。

Markdown All in One 支持 LaTeX 數學表達式的渲染，還支持將 Markdown 文檔轉換為 HTML 格式。

擴展搜索關鍵詞：Markdown All in One

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

列表編輯演示：

3、GitLens

GitLens 通過提供詳細的提交歷史、代碼作者信息和圖形化的分支視圖，極大地增強了 VS Code 的 Git 功能。

使用 GitLens，開發者可以輕松地追蹤和管理代碼變更，從而優化團隊協作和代碼審查過程。

擴展搜索關鍵詞：GitLens

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

只需單擊按鈕，您就可以瀏覽任何文件的歷史記錄，比較一段時間內的更改并查看整個文件或單個行的修訂歷史記錄。

4、Code Spell Checker

Code Spell Checker 通過掃描代碼中的英文拼寫錯誤，幫助開發者維護代碼的準確性和專業性，確保變量名、注釋和文檔的清晰和正確。

Code Spell Checker 支持自動檢測和提供修正建議，從而提升代碼的整體質量和可讀性。

擴展搜索關鍵詞：Code Spell Checker

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

演示：

5、Beautify

Beautify 可以自動美化和格式化 JavaScript、JSON、CSS、Sass 和 HTML 代碼，支持自定義配置以符合不同的編碼風格，讓代碼更加整潔易讀。

目前該擴展已不再維護。

擴展搜索關鍵詞：Beautify

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

6、Better Comments

Better Comments 通過允許開發者使用不同的標記和格式來分類和突出顯示代碼中的注釋，從而提高注釋的可讀性和組織性，使得代碼更加易于維護和理解。

擴展搜索關鍵詞：Better Comments

插件鏈接地址：https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

例子：

在線咨詢

上一篇：Java實現圖形驗證碼程序
下一篇：蘋果設備最新迅雷安裝教程

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商