如下客座文章由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. 粘貼一些代碼,它將會向你展現不一樣的解析器的輸出做爲預覽