您当前的位置:首页 > 电脑百科 > 程序开发 > 前端

2023年全网最火的前端5大 markdown 解析器与编译器!

时间:2023-08-20 14:15:19  来源:今日头条  作者:高级前端进阶

今天给大家带来的主题是盘点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。

 

目前 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/



Tags:markdown   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
2023年全网最火的前端5大 markdown 解析器与编译器!
今天给大家带来的主题是盘点2023年全网最火的 markdown 解析器和编译器,话不多说,直接进入正题。1.Marked.js1.1 什么是marked.jsmarked.js是markdown解析器和编译器,其具有以...【详细内容】
2023-08-20  Search: markdown  点击:(269)  评论:(0)  加入收藏
网页的markdown怎么导出?手把手详细教学
网页的markdown怎么导出?如今markdown提供给人们一种便携式创建文本的形式,通过简易文本进行文档内容的创建和浏览,由于占用内存小,使用简便,而广受欢迎。随着社会的不断发展,mark...【详细内容】
2023-02-23  Search: markdown  点击:(196)  评论:(0)  加入收藏
这个markdown编辑器无敌了
前言Markdown 是一种轻量级标记语言,由于其具备简洁的语法和轻量化等优点,现在越来越多的内容网站用它来进行文档的编写,比如git的readme文档、腾讯文档等都支持markdown语法。...【详细内容】
2022-05-16  Search: markdown  点击:(537)  评论:(0)  加入收藏
markdown基本语法介绍
一.markdown是什么Markdown 是一种轻量级标记语言。使用标题、加粗、斜体和高亮等方式,对文本进行展示。具有着易读易写等特点。同时对图片、图表和数学均有支持。而且目前...【详细内容】
2022-05-16  Search: markdown  点击:(374)  评论:(0)  加入收藏
微信图文 Markdown 编辑器开源了
不知道逛逛GitHub 的读者有没有公众号的博主,或者你是不是也像我一样经常在公众号上面发一些东西。公众号的编辑器不支持 Markdown 语法,只能算是一个功能强大一点的富文本编...【详细内容】
2022-05-05  Search: markdown  点击:(424)  评论:(0)  加入收藏
Joplin-跨平台平开源免费Markdown笔记(替代印象笔记/可离线同步)
每个人的记忆力是有限的,在如今信息如此丰富的时代,我们都需要使用一些笔记软件来保存备忘和资料,否则时间长了你会慢慢地忘记很多东西。所以笔记软件是刚需,但每人的需求和习惯...【详细内容】
2022-02-11  Search: markdown  点击:(4102)  评论:(0)  加入收藏
用 Markdown 写作,该用什么编辑器?
来源:麻瓜编程本文约984字,建议阅读3分钟。本文介绍了10款高颜值又好用的Markdown编辑器。● Typorahttps://www.typora.io免费,支持 Windows、OS X 和、Linux。Typora 支持实...【详细内容】
2020-08-24  Search: markdown  点击:(474)  评论:(0)  加入收藏
Markdown基本语法详解
很多写作者都知道Markdown写作的巨大优点:专注于写作本身而不是排版。很多博客、内容平台(包括头条号)都支持Markdown写作语法了。今天我们就来了解一下Markdown。一、什么是Ma...【详细内容】
2020-07-12  Search: markdown  点击:(612)  评论:(0)  加入收藏
MySQL数据库表结构快速导出成MarkDown文档
1.前言作为一名技术人员,少不了接触数据库,那么当遇到一个旧项目数据库表比较多,怎么快速的导出表结构,形成文档方便后续跟进呢?今天我给大家安利一个好用的工具mysql_markdown。...【详细内容】
2020-06-11  Search: markdown  点击:(1165)  评论:(0)  加入收藏
程序员为什么要使用Markdown
为什么要学习markdown,因为markdown可以让你养成了记录的习惯。我自从使用了markdown之后,就喜欢了写文档,记录工作日志,记录周会,记录季度计划,记录学习目标,写各种设计文档。mark...【详细内容】
2020-05-16  Search: markdown  点击:(326)  评论:(0)  加入收藏
▌简易百科推荐
20k级别前端是怎么使用LocalStorage的,想知道吗?
当咱们把咱们想缓存的东西,存在localStorage、sessionStorage中,在开发过程中,确实有利于咱们的开发,咱们想看的时候也是一目了然,点击Application就可以看到。前言大家好,我是林...【详细内容】
2024-03-26  前端之神  微信公众号  Tags:前端   点击:(11)  评论:(0)  加入收藏
前端不存在了?盲测64%的人更喜欢GPT-4V的设计,杨笛一等团队新作
3 月 9 日央视的一档节目上,百度创始人、董事长兼 CEO 李彦宏指出,以后不会存在「程序员」这种职业了,因为只要会说话,人人都会具备程序员的能力。「未来的编程语言只会剩下两种...【详细内容】
2024-03-11  机器之心Pro    Tags:前端   点击:(9)  评论:(0)  加入收藏
前端开始“锈化”?Vue团队开源JS打包工具:基于Rust、速度极快、尤雨溪主导
Vue 团队已正式开源Rolldown &mdash;&mdash; 基于 Rust 的 JavaScrip 打包工具。Rolldown 是使用 Rust 开发的 Rollup 替代品,它提供与 Rollup 兼容的应用程序接口和插件接口...【详细内容】
2024-03-09  OSC开源社区    Tags:Vue   点击:(11)  评论:(0)  加入收藏
两年前端经验还不会手写Promise?
什么是promise?当我们处理异步操作时,我们经常需要进行一系列的操作,如请求数据、处理数据、渲染UI等。在过去,这些操作通常通过回调函数来处理,但是回调函数嵌套过多会导致代码...【详细内容】
2024-03-07  海燕技术栈  微信公众号  Tags:Promise   点击:(23)  评论:(0)  加入收藏
网站开发中的前端和后端开发有什么区别
前端开发和后端开发都是干什么的?有哪些区别?通俗地讲,前端干的工作是用户可以直接看得见的,而后端开发的工作主要在服务端,用户不太能直接看到。虽然前端开发和后端开发的工作有...【详细内容】
2024-02-21  CarryData    Tags:前端   点击:(31)  评论:(0)  加入收藏
网站程序开发中的前后端分离技术
随着互联网的快速发展和技术的不断创新,传统的网站开发模式已经难以满足日益增长的业务需求。为了提高开发效率、增强系统的可维护性和可扩展性,前后端分离技术逐渐成为了网站...【详细内容】
2024-01-31  网站建设派迪星航    Tags:前后端分离   点击:(23)  评论:(0)  加入收藏
如何优雅的实现前端国际化?
JavaScript 中每个常见问题都有许多成熟的解决方案。当然,国际化 (i18n) 也不例外,有很多成熟的 JavaScript i18n 库可供选择,下面就来分享一些热门的前端国际化库!i18nexti18ne...【详细内容】
2024-01-17  前端充电宝  微信公众号  Tags:前端   点击:(68)  评论:(0)  加入收藏
Vue中Scope是怎么做样式隔离的?
scope样式隔离在 Vue 中,样式隔离是通过 scoped 特性实现的。当在一个组件的 <style> 标签上添加 scoped 特性时,Vue 会自动为这个样式块中的所有选择器添加一个唯一的属性,以...【详细内容】
2024-01-04  海燕技术栈  微信公众号  Tags:Vue   点击:(80)  评论:(0)  加入收藏
vue3中 ref和 reactive的区别 ?
最近有朋友在面试过程中经常被问到这么一个问题,vue3 中的ref 和 reactive的区别在哪里,为什么 要定义两个API 一个 api不能实现 响应式更新吗??带着这个疑问 ,我们 接下来进行逐...【详细内容】
2024-01-03  互联网高级架构师  今日头条  Tags:vue3   点击:(38)  评论:(0)  加入收藏
React18 与 Vue3 全方面对比
1. 编程风格 & 视图风格1.1 编程风格 React 语法少、难度大;Vue 语法多,难度小例如指令:Vue<input v-model="username"/><ul> <li v-for="(item,index) in list" :key="inde...【详细内容】
2024-01-03  爱做梦的程序员  今日头条  Tags:Vue3   点击:(72)  评论:(0)  加入收藏
站内最新
站内热门
站内头条