zoukankan      html  css  js  c++  java
  • [译文]选择使用正确的 Markdown Parser

    以下客座文章由Ray Villalobos提供。在这篇文章中Ray将要去探索很多种不同的Markdown语法。所有的这些MarkDown变种均提供了不同的特性,都超越传统的Markdown语法,却又相互之间又各有不同。如果你正在挑选一门Markdown语言使用(或是提供给你的Web产品的用户使用),那你就值得的去了解它们,一旦选定就很难再切换到别的Markdown版本而且挑选的结果依赖于你需要哪些特性。Ray提供的一门关于MarkDown课程将会分享这些不同的版本都拥有哪些特性去帮助你做出明智的选择。

    Markdown改变了很多专业领域的书写方式。这种语言使用简单的文本和极少的标记就能够将其转换为越来越多的格式。然而不是所有的Markdown解析器被创造出来都是一样的。因为原来的规范没有与时俱进,替代版本像是 Multi-Markdown,GFM(Github Flavored Markdown),Markdown Extra和其他的版本扩充了这门语言。

    Markdown的原始解析器是用Perl编写的。核心的特性包括解析块元素(例如段落,换行,标头,块引用,列表,代码块和水平线)和行内元素(链接,加重,代码段和图片)。从那以后,该解析器的作者John Gruber再也没有扩充过语法了,所以很多的新增和实现伴随着不同的他们认为合适的、或是支持解释某些元素的解析器支持浮出水面。

    ![]( https://cdn.css-tricks.com/wp-content/uploads/2016/01/choose-markdown.jpg)

    选择一个版本

    在一个程序里实现Markdown功能需要考虑很多,包括你将要使用的开发语言和你想要支持的特性。原始的版本是由Perl编写的,对于每一个项目来说,这并不是一个实用的选择。最流行的实现版本包括:PHP, Ruby和JavaScript。你选择了哪种语言将会间接影响你能支持哪些特性和能使用哪些库。让我们来看看一些选择:

    语言 库 (下载项目)
    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,这里还有许多额外的其他的语言实现的版本。

    核心特性

    核心Markdown语言支持许多非常有用的默认功能。虽然不同的实现支持一系列的扩展功能,他们都应该至少支持以下核心语法:行内html, 自动分段, 标头, 块引用, 列表, 代码块, 水平线, 链接, 加重, 行内代码图片.

    值得注意的版本

    可用Markdown的版本有很多,有几个已经对其它版本有很大的影响。正因如此,你会经常看到他们被其他版本引述作为其中的一部分。例如,库会提到支持CommonMark,GFM或是Multi-Markdown。让我们来看看那意味着什么。

    GFM

    Github是使Markdown在开发者中流行的原因之一,开源共享平台接受并扩展了一个叫Github Flavored Markup的版本,(GFM)包括围栏代码块,URL自动链接,删除线,表格甚至能够创建带有勾选框的任务列表。所以,当一个版本支持提及的GFM,就是实现了这些扩展。

    Supports: [Fenced Codeblocks], [Syntax Highlighting], [Tables], [URL AutoLinking], [Strikethrough]

    CommonMark

    最近有一个行动去规范Markdown语法。一组Markdown开发者加入去创建一个版本,测试和文档,最终的结果就是名为CommonMark的更强大的规范语言。此时,这个实现添加了围栏代码块,但是更多的是某些特征是如何获得一致的输出和转换要实现的具体细节。很多的拓展将会带来更加符合其他语言已经提出的特性.

    这种格式是较新的,不支持很多功能,但它正在积极开发并有计划地增加了许多Multi-Markdown的特性。

    Supports: [Fenced Codeblocks], [URL AutoLinking], [Strikethrough]

    Multi-markdown

    第一个拓展了这门语言的重大的项目是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.

    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 自动链接

    这些简单的扩展让你的文字中出现的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

    • 需要拓展

    哦 亲爱的 I/O

    有一件事是你必须要小心的是如何处理不同版本的输入和输出。只是因为一个版本说它支持表,并不意味着定义表的标准方式。此外,一些版本将生成HTML,有些极其冗长,有些会很简。还有一大变化的东西,如白色空间处理。有些版本将在每个标题设置ID但其他一些不会。这已经是OpenMark之后关注点之一。最好辨识你选择的版本支持哪些方式的方法是使用Babelmark 2 test. 粘贴一些代码,它将会向你展示不同的解析器的输出作为预览

  • 相关阅读:
    整理一批 国内外优秀设计团队 & 设计相关网站
    国内技术团队博客盘点(不只是前端!)
    【技能大赛笔记01】Zigbee点对点按键控制程序开发
    【网络爬虫入门05】分布式文件存储数据库MongoDB的基本操作与爬虫应用
    【网络爬虫入门04】彻底掌握BeautifulSoup的CSS选择器
    【网络爬虫入门03】爬虫解析利器beautifulSoup模块的基本应用
    【网络爬虫入门02】HTTP客户端库Requests的基本原理与基础应用
    【网络爬虫入门01】应用Requests和BeautifulSoup联手打造的第一条网络爬虫
    【Zigbee技术入门教程-02】一图读懂ZStack协议栈的核心思想与工作机理
    【Zigbee技术入门教程-号外】基于Z-Stack协议栈的抢答系统
  • 原文地址:https://www.cnblogs.com/lfk-dsk/p/5205969.html
Copyright © 2011-2022 走看看