选择合适的Markdown解析器

在项目中实现 Markdown 时需综合考量多种因素,包括开发语言选择及所需支持的功能特性。原始实现采用Perl语言编写,但并非所有项目都适用。目前主流语言均有对应实现,包括:PHP、Ruby和JavaScript。

   Markdown | 

Markdown改变了众多领域专业人士的写作方式。这种语言采用简洁文本与最小标记,可转换为日益丰富的格式。然而并非所有Markdown解析器都性能相当。由于原始规范未能与时俱进,诸如Multi-Markdown、GFM(Github风格Markdown)、Markdown Extra等衍生版本不断扩展了该语言的功能。

原始解析器采用Perl语言编写,核心功能涵盖块级元素(段落、换行、标题、引用、列表、代码块、水平线)与跨行元素(链接、强调、代码片段、图片)的解析。此后,其创建者John Gruber未再扩展该语言,因此出现了多种扩展方案与实现方式:不同解析器根据自身需求添加对特定实现的支持,或对某些元素的解析方式进行诠释。

元素周期表

 

版本选择

在项目中实现 Markdown 时需综合考量多种因素,包括开发语言选择及所需支持的功能特性。原始实现采用Perl语言编写,但并非所有项目都适用。目前主流语言均有对应实现,包括:PHP、Ruby和JavaScript。选择何种语言将直接影响可支持的功能范围及可用库资源。以下是部分选项解析:

Language Library (download project)
Perl Original version
JavaScript CommonMark, Marked, Markdown-it, Remarkable, Showdown
Ruby Github Flavored Markup, Kramdown, Maruku, Redcarpet
PHP Cebe Markdown, Ciconia, Parsedown, PHP Markdown Extended
Python Python Markdown

其他语言也存在额外实现方案,供您在不同语言环境中实现Markdown时参考。

核心功能

核心Markdown语言支持若干实用默认功能。尽管不同实现支持的扩展功能各异,但至少应包含以下核心语法:内联HTML自动分段标题块引用列表代码块水平线链接强调内联代码caption align=aligncenter

值得关注的扩展规范

在众多Markdown版本中,某些扩展对其他版本产生了深远影响,以至于常被其他版本直接引用。例如,各类库文件常声明支持CommonMark、GFM或Multi-Markdown等规范。下面我们来了解这些术语的具体含义。

GFM

Markdown之所以在开发者中广受欢迎,部分原因在于开源共享平台Github采纳并扩展了该语言,推出了名为Github Flavored Markup(GFM)的版本,新增了带代码块注释的代码块URL自动链接删除线表格 以及在仓库内创建待办事项的功能。因此,当版本声明支持GFM时,请关注这些扩展功能的实现情况。

支持功能:带边框代码块语法高亮表格URL自动链接待办事项删除线

CommonMark

近期,业界正推动Markdown的标准化进程。一群Markdown开发者联合起来,为该语言创建了新版本、测试规范及文档,最终形成了更完善的语言规范——即CommonMark。此次规范不仅新增了带边框的代码块,更重点细化了特定功能的实现细节,以确保输出与转换的一致性。未来将提出更多扩展方案,使该格式更贴近其他语言的功能特性。

此格式相对较新,目前支持的功能有限,但正处于积极开发阶段,计划添加大量Multi-Markdown功能。

当前支持功能:带栅栏的代码块URL自动链接

Multi-markdown

首个对该语言进行实质性扩展的项目是Multi-Markdown。它为语言增添了多项功能,这些功能也得到其他版本的支持。该项目最初与Markdown相同采用Perl编写,后迁移至C语言。因此若项目支持Multi-Markdown,则通常具备这些核心功能

支持功能:带边框代码块语法高亮表格元数据片段/交叉引用链接脚注删除线定义列表, Math.

可选功能

让我们看看不同实现中可用的功能。

带边框的代码块

对开发者最有价值的新增功能之一,是能够轻松在Markdown中添加代码。原始实现会自动将缩进4个空格或1个制表符的文本块视为代码。这种方式有时不够灵活,因此多个实现引入了带边框代码块功能:允许在文本块开头添加三个反引号(`)或某些情况下三个波浪号(~)来标记代码:

```
body {
  margin: 0;
  padding: 0;
  color: #222;
  background-color: white;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 160%;
  font-weight: 400;
}
```

支持实现:
Cebe MarkdownCiconiaGithub Flavored MarkdownKramdownMarkdown-it, Marked, Maruku, Multi-Markdown, ParsedownPHP Markdown ExtendedPython MarkdownRedcarpetRemarkableShowdown

语法高亮

添加代码块固然便利,但默认情况下,Markdown解析器仅会用<code><pre>标签包裹代码块,导致文本以等宽字体显示为预格式化文本。部分实现可通过在代码块旁标注语言符号来优化效果,并可能内置解析器:自动提供多种配色方案,同时支持指定代码语言类型,使配色更具语义化意义。

```css
body {
  margin: 0;
  padding: 0;
  color: #222;
  background-color: white;
  font-family: sans-serif;
  font-size: 1.8rem;
  line-height: 160%;
  font-weight: 400;
}
```

支持实现:
CiconiaGithub Flavored MarkdownKramdown*,MarkedMarukuMulti-MarkdownParsedownPHP Markdown ExtendedPython Markdown, Redcarpet, Remarkable, Showdown

* 部分功能并非内置于解析器,而是依赖其他库实现,例如highlight.js

表格

用HTML编写表格可能相当繁琐。某些版本的Markdown通过简洁的语法实现了表格功能。

Dimensions | Megapixels
---|---
1,920 x 1,080 | 2.1MP
3,264 x 2,448 | 8MP
4,288 x 3,216 | 14MP

渲染效果如下:

Dimensions Megapixels
1,920 x 1,080 2.1MP
3,264 x 2,448 8MP
4,288 x 3,216 14MP

掌握这种表格构建方式只需几分钟,但操作几次后,你会觉得使用HTML反而麻烦。若需创建表格帮助,可参考此Markdown表格生成器

图1:选择合适的Markdown解析器

支持实现:
Cebe MarkdownCiconiaGithub Flavored MarkdownKramdownMarkdown-it, Marked, Maruku, Multi-Markdown, ParsedownPHP Markdown ExtendedPython MarkdownRedcarpetRemarkableShowdown

元数据

某些扩展允许添加元数据,用于向应用程序提供可解析的信息,例如选择模板或设置页面标题。部分扩展采用多层Markdown结构存储元数据,而Jekyll解析器等则使用YAML格式,可在元数据区块中表达复杂数据结构。这对应用程序开发者而言是个非常实用的便捷功能。

---
Title:  SVG Article
Author: Ray Villalobos
Date:   January 6, 2016
heroimage: "http://i.imgur.com/rBX9z0k.png"
tags:
- data visualization
- bitmap
- raster graphics
- navigation
---

支持实现:
Markdown-itMarukuMulti-MarkdownPHP Markdown ExtendedPython Markdown, Redcarpet, Remarkable, Showdown

URL自动链接

这个相当简单的扩展能让文本中自然出现的URL通过解析器自动转换为链接。在GFM等实现中,这种功能非常便捷实用——无需额外操作即可使URL可点击,大大简化了文档编写流程。

支持实现:
Cebe MarkdownCiconiaCommonMarkGithub Flavored MarkdownKramdownMarkdown-itMarkedMarukuMulti-MarkdownParsedownPHP Markdown ExtendedPython MarkdownRedcarpetRemarkableShowdown

片段/交叉引用链接

使用HTML时,您可在锚点标签中添加页面元素ID前的井号,轻松创建文档内引用。某些实现支持为此类引用创建快捷方式。该功能特别实用,能让你快速在文档内交叉引用,无需编写大量HTML代码。由于不同版本实现方式差异显著,务必仔细阅读所用版本的文档说明。

You can link to a headline called 'myheadline' in your document using this [My Headline][].

## My Headline
The word 'reference' right next to this will get a link that links via an href to the headline above. The headline, in other words, gets an ID that the link points to.

支持实现:
Ciconia, Multi-Markdown, Maruku, Multi-Markdown , Parsedown, PHP Markdown Extended, Redcarpet, Showdown

标题自定义ID

另一项实用功能是在标题中添加ID,以便通过CSS更精准地定位。部分解析器会自动为所有标题添加ID(尤其支持片段/交叉引用时),因此此功能并非必需。但某些版本允许自定义ID命名规则,这比自动命名更灵活,有时更为便利。

### Custom IDs {#custom-id}
The headline above, when rendered by the parser, will have a custom ID that you specify in the curly braces.

可用解析器:
Cebe MarkdownKramdown

脚注及其他链接类型

脚注功能可在文档内创建链接,指向标记语言页面底部的参考内容。这与常规链接不同——常规链接会嵌入在正文内容中。该功能允许用户在文档的特定区域集中查看所有相关链接,有时会带来良好体验。

You can find a demo of a site[^Demo] built with PostCSS in our footnotes, or you can checkout the [^Github Repo] for the project.

#### Footnotes
[Demo](http://iviewsource.com/exercises/postcsslayouts)
[Github Repo](https://github.com/planetoftheweb/postcsslayouts)

支持实现:
Cebe MarkdownKramdownMarkdown-itMaruku, Multi-Markdown, Parsedown, PHP Markdown Extended, Python MarkdownRedcarpetRemarkableShowdown

**注意**:Multi-Markdown等解析器中存在多种替代链接方法。各版本对此的支持情况参差不齐。这意味着即使解析器宣称兼容“多Markdown”,不同解析器仍会实现不同类型的链接引用。这包括引文、标题自动生成的ID、创建自定义ID的能力、交叉引用链接等功能。某些解析器甚至会开发专属链接特性。

待办事项

这是Github Flavored Markdown的特色功能,已在部分实现中普及。它添加待办列表标记,可在内容旁创建复选框以模拟待办清单。

- [ ] Run `> npm-install` to install the project dependencies
- [X] Install gulp.js via the Mac terminal or Gitbash on a PC `> npm install -g gulp`
- [ ] Run the Gulp command `> gulp`

支持实现:
CiconiaGithub Flavored MarkdownMarkdown-itMarked, Python Markdown, Redcarpet, Showdown

删除线

若需添加删除线标记,多数版本支持使用<s>标签包裹文本。但若需更全面的编辑器注释功能,建议参考相关格式CriticMarkup

支持实现:
CiconiaMarkdown-itMarkedMulti-MarkdownParsedownRemarkableRedcarpetShowdown

定义列表

尽管定义列表不如其他列表类型常见,但它是编写特定HTML元素的绝佳方式,某些实现方案提供了更简便的创建方法。根据不同语言环境,定义方式有两种:使用冒号(:)或波浪号(~),其中冒号实现更为普遍。

ES6/ES2015
:   The new version of the popular JavaScript language

TypeScript
  ~ TypeScript is a language that is a superset of JavaScript that can be compiled through a transpiler to JavaScript that will work with most browsers.

支持实现:
Kramdown, Markdown-it*, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Remarkable

* 需安装扩展程序

数学公式

创建数学公式的功能对部分用户颇具价值,因此某些实现(如Multi-Markdown)内已出现专用语言。尽管部分语言声称支持其他语言的公式创建,但有时需通过扩展实现。

支持实现:
Kramdown*、MarukuMulti-MarkdownMarkdown-itPython Markdown*

* 需安装扩展

哦,这甜美的I/O

需要特别注意的是不同版本对输入输出的处理差异。即便某版本声称支持表格,也不意味着生成表格代码的方式存在统一标准。有些版本会生成冗长的HTML代码,有些则渲染极简代码。

空格等元素的处理方式也存在差异。有些版本会在每个标题内添加ID,有些则不会。这正是OpenMark平台致力于解决的核心问题之一——如何生成一致的输出。要了解所选版本的具体处理方式,最佳方法是使用Babelmark 2测试。粘贴代码后,该工具将展示不同解析器的输出差异,并提供浏览器预览效果。

图2:选择合适的Markdown解析器

你也许感兴趣的:

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注