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小时内与您取得联系。

整合营销服务商