如下客座文章由Ray Villalobos提供。在这篇文章中Ray将要去探索不少种不一样的Markdown语法。全部的这些MarkDown变种均提供了不一样的特性,都超越传统的Markdown语法,却又相互之间又各有不一样。若是你正在挑选一门Markdown语言使用(或是提供给你的Web产品的用户使用),那你就值得的去了解它们,一旦选定就很难再切换到别的Markdown版本并且挑选的结果依赖于你须要哪些特性。Ray提供的一门关于MarkDown课程将会分享这些不一样的版本都拥有哪些特性去帮助你作出明智的选择。css
Markdown改变了不少专业领域的书写方式。这种语言使用简单的文本和极少的标记就可以将其转换为愈来愈多的格式。然而不是全部的Markdown解析器被创造出来都是同样的。由于原来的规范没有与时俱进,替代版本像是 Multi-Markdown,GFM(Github Flavored Markdown),Markdown Extra和其余的版本扩充了这门语言。html
Markdown的原始解析器是用Perl编写的。核心的特性包括解析块元素(例如段落,换行,标头,块引用,列表,代码块和水平线)和行内元素(连接,加剧,代码段和图片)。从那之后,该解析器的做者John Gruber再也没有扩充过语法了,因此不少的新增和实现伴随着不一样的他们认为合适的、或是支持解释某些元素的解析器支持浮出水面。python
在一个程序里实现Markdown功能须要考虑不少,包括你将要使用的开发语言和你想要支持的特性。原始的版本是由Perl编写的,对于每个项目来讲,这并非一个实用的选择。最流行的实现版本包括:PHP, Ruby和JavaScript。你选择了哪一种语言将会间接影响你能支持哪些特性和能使用哪些库。让咱们来看看一些选择:git
语言 | 库 (下载项目) |
---|---|
Perl | [Original version]( http://daringfireball.net/projects/markdown/) |
JavaScript | [CommonMark]( https://github.com/jgm/commonmark.js), [Marked]( https://github.com/chjj/marked), [Markdown-it]( https://github.com/markdown-it/markdown-it), [Remarkable]( https://github.com/jonschlinkert/remarkable), [Showdown]( https://github.com/showdownjs/showdown) |
Ruby | [Github Flavored Markup]( https://github.com/github/markup), [Kramdown]( https://github.com/gettalong/kramdown), [Maruku]( https://github.com/bhollis/maruku), [Redcarpet]( https://github.com/vmg/redcarpet) |
PHP | [Cebe Markdown]( https://github.com/cebe/markdown), [Ciconia]( https://github.com/kzykhys/Ciconia), [Parsedown]( https://github.com/erusev/parsedown), [PHP Markdown Extended]( https://github.com/piwi/markdown-extended) |
Python | [Python Markdown]( https://pypi.python.org/pypi/Markdown) |
以防万一你想用别的语言去实现Markdown,这里还有许多额外的其余的语言实现的版本。github
核心Markdown语言支持许多很是有用的默认功能。虽然不一样的实现支持一系列的扩展功能,他们都应该至少支持如下核心语法:行内html, 自动分段, 标头, 块引用, 列表, 代码块, 水平线, 连接, 加剧, 行内代码 和 图片.web
可用Markdown的版本有不少,有几个已经对其它版本有很大的影响。正因如此,你会常常看到他们被其余版本引述做为其中的一部分。例如,库会提到支持CommonMark,GFM或是Multi-Markdown。让咱们来看看那意味着什么。npm
Github是使Markdown在开发者中流行的缘由之一,开源共享平台接受并扩展了一个叫Github Flavored Markup的版本,(GFM)包括围栏代码块,URL自动连接,删除线,表格甚至可以建立带有勾选框的任务列表。因此,当一个版本支持说起的GFM,就是实现了这些扩展。gulp
Supports: [Fenced Codeblocks], [Syntax Highlighting], [Tables], [URL AutoLinking], [Strikethrough]api
最近有一个行动去规范Markdown语法。一组Markdown开发者加入去建立一个版本,测试和文档,最终的结果就是名为CommonMark的更强大的规范语言。此时,这个实现添加了围栏代码块,可是更多的是某些特征是如何得到一致的输出和转换要实现的具体细节。不少的拓展将会带来更加符合其余语言已经提出的特性.浏览器
这种格式是较新的,不支持不少功能,但它正在积极开发并有计划地增长了许多Multi-Markdown的特性。
Supports: [Fenced Codeblocks], [URL AutoLinking], [Strikethrough]
第一个拓展了这门语言的重大的项目是Multi-Markdown。它增长了不少其余版本已经支持的特性。它最初和Markdown同样是用Perl编写的,不事后来转用C来写。因此,若是你看到一个项目支持Multi-Markdown,那么它极可能具备这些功能大部分。
让咱们来看看这些不一样实现版本都支持的特性。
可以简单地在Markdown中添加代码是开发者添加的最好的功能之一。原始的实现会将四个空格或是一个制表符开头的行自动将文本做为代码块。有几个Markdown版本把代码块合并起来,容许你在文本开头使用三个刻度标记(`),或在某些状况下三个波浪字符(〜),以此把文本标记为代码块:
``` body { margin: 0; padding: 0; color: #222; background-color: white; font-family: sans-serif; font-size: 1.8rem; line-height: 160%; font-weight: 400; } ```
Available with: CommonMark, Github Flavored Markdown, Kramdown, Markdown-it, Marked, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
添加代码块是很棒的,可是默认Markdown的解释器将会将代码使用<code>
和 <pre></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; } ```
Available with: Github Flavored Markdown, Kramdown*, Marked, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
*有些支持不嵌入到解析器,而是依赖于其它的库如[highlight.js](https://highlightjs.org/)。
在HTML编写表格很笨拙。 markdown的某些版本可让你添加表以一个至关简单的语法。
Dimensions | Megapixels ---|--- 1,920 x 1,080 | 2.1MP 3,264 x 2,448 | 8MP 4,288 x 3,216 | 14MP
Renders like this:
尺寸 | 百万像素 |
---|---|
1,920 x 1,080 | 2.1MP |
3,264 x 2,448 | 8MP |
4,288 x 3,216 | 14MP |
只须要几分钟就可以作出像这样的一个表格,可是在你作过几回后,你会认为使用HTML有一些麻烦。若是你须要帮助建立表格,阅读这篇指南Markdown Tables Generator.
Available with: Github Flavored Markdown, Kramdown, Markdown-it, Marked, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
一些拓展将会让你添加元数据以便添加一些信息,例如你的应用能够解析的像是选择模版或是设置一个文章标题。一些人使用Multi-Markdown structure为了元数据,其余人喜欢Jekyll parser的使用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 ---
Available with: Markdown-it, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
这些简单的扩展让你的文字中出现的URL经过分析器会自动转换为连接。这实在是方便,实用的例如GFM,使连接可点击而无需额外的工做使得文档更容易编写的实现。
Available with: CommonMark, Github Flavored Markdown, Kramdown, Markdown-it, Marked, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
脚注容许你建立你的文档中到放置在Markdown页面底部引用连接。这比普通的连接、行内放置您的内容的不一样。这容许用户在一个单独的部分,浏览全部的相关连接,有时会颇有帮助。
你可以找到一个站点的例子[^Demo]使用了PostCSS构建的脚注,或是你可以查看的[^Github Repo]从这个项目。 #### Footnotes [Demo]( http://iviewsource.com/exercises/postcsslayouts) [Github Repo]( https://github.com/planetoftheweb/postcsslayouts)
在Multi-Markdown中还有不少其余的交互连接方式,可是它们在规范以外几乎没有任何支持。包括交叉引用和引文.颇有可能我的解析器处理连接的方式就是你将要发掘的东西。
Available with: Kramdown, Markdown-it, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Redcarpet, Remarkable, Showdown
这是GFM的特性,而且已经被部分的实现。它增长了任务列表标记使您能够建立复选框旁边的内容来模拟一个任务列表清单。
- [ ] 运行 `> npm-install` 安装项目依赖 - [X] 安装 gulp.js 经过Mac的terminal或是PC上的Gitbash `> npm install -g gulp` - [ ] 运行Gulp命令行`> gulp`
Available with: Github Flavored Markdown, Markdown-it, Marked, Python Markdown, Redcarpet,Showdown
虽然定义列表不为其余类型的列表为常见,这是一个伟大的方式编码在HTML中的某些类型的元素,有些实现建立了更简单的添加方式去添加这些。他们的定义有两种方式,根据不一样的语言,用冒号(:
)或符号(~
),虽然冒号的实用更为常见。
ES6/ES2015 : 流行JavaScript的新版本 TypeScript ~ TypeScript是一个可以转换为JavaScript的、工做在大多数浏览器上的
Available with: Kramdown, Markdown-it*, Maruku, Multi-Markdown, PHP Markdown Extended, Python Markdown, Remarkable
对于一些用户建立数学公式是很是有用的,因此能够建立这些的语言已经在一些markdown的实现中出现,即Multi-Markdown。在其余语言的支持是可用的,有时经过扩展。
Available with: Kramdown, Maruku, Multi-Markdown, Markdown-it, Python Markdown
有一件事是你必需要当心的是如何处理不一样版本的输入和输出。只是由于一个版本说它支持表,并不意味着定义表的标准方式。此外,一些版本将生成HTML,有些极其冗长,有些会很简。还有一大变化的东西,如白色空间处理。有些版本将在每一个标题设置ID但其余一些不会。这已是OpenMark以后关注点之一。最好辨识你选择的版本支持哪些方式的方法是使用Babelmark 2 test. 粘贴一些代码,它将会向你展现不一样的解析器的输出做为预览