文字的發(fā)明和使用使得信息的保存和傳遞有了革命性的飛躍。隨著信息的豐富和傳遞方式的革新，人們對(duì)文本提出了新的格式化的要求，以此來方便人們更舒適地獲取信息。如此，HTML(HyperText Markup Language)作為一種超文本標(biāo)記語言(markup language)應(yīng)運(yùn)而生，無數(shù)的網(wǎng)頁從此有了主次分明，層次清晰的格式。如果將HTML比作一架重機(jī)槍，那么Markdown就是一把手槍，滿足了主要的文本格式標(biāo)記的需求，可是操作性卻大大簡(jiǎn)化。秉承「易讀易寫」的宗旨，Markdown作為一種輕量級(jí)標(biāo)記語言(lightweight markup language)，讓無數(shù)的程序猿和文字工作者愛不釋手。學(xué)習(xí)Markdown，投資短，見效快，提高生活品質(zhì)立竿見影，那么還有什么阻止你不去學(xué)習(xí)。
有那么一小撮人，為了滿足自己某個(gè)特定的需要，它們不甘妥協(xié)，走進(jìn)小黑屋，點(diǎn)亮屏幕，一段指尖與智慧的狂舞后，皺緊的眉頭終于舒展開來，隨后露出滿意的笑容。Linus Torvalds如此打造了Linux, Rasmus Lerdorf如此貢獻(xiàn)出了PHP, John Gruber和Aaron Swartz如此開創(chuàng)了Markdown。Markdown的誕生就是因?yàn)檫@哥倆想要『使用一種易讀易寫的純文本格式來編寫文檔，并且可以被轉(zhuǎn)換成XHTML(或者HTML)文檔』。2004年，Markdown橫空出世，從此紅遍大江南北。如今 Markdown深受程序猿所愛，并且已成了眾多優(yōu)秀工具的標(biāo)配，比如Github, Stack Overflow，簡(jiǎn)書，為知筆記，etc。
原生的Markdown文本轉(zhuǎn)換是使用Perl實(shí)現(xiàn)的，其語法吸收了眾家之長，包括Setext，atx，Textile，reStructuredText，Grutatext，EtText以及最原始的郵件格式。原生的Markdown語法簡(jiǎn)潔明了(使用特殊標(biāo)點(diǎn)符號(hào)來標(biāo)記格式)并且同時(shí)支持HTML標(biāo)簽。之后不同編程語言實(shí)現(xiàn)的Markdown版本(Markdown解析器)也相繼而生。不同的解析器對(duì)原生的Markdown語法進(jìn)行了少許的擴(kuò)展。其中較為流行的是用Ruby實(shí)現(xiàn)的版本kramdown。大名鼎鼎的GitHub就采用kramdown作為其Markdown的解析器(Starting May 1st 2016)。這里我們從原生的markdown語法介紹起，然后再來學(xué)習(xí)kramdown和github-flavored-markdown對(duì)原生語法進(jìn)行的一些拓展。花上十分鐘讀讀本文，沒準(zhǔn)你會(huì)愛上Markdown。再花點(diǎn)時(shí)間練一練，讓你的markdown使用起來得心應(yīng)手，從此寫起文章來一氣呵成。
<a name="original_markdown" id="original_markdown"></a>
1. 原生態(tài)Markdown標(biāo)記語法
1.1 標(biāo)題
Markdown通過在行首添加1-6個(gè)#符號(hào)來定義不同級(jí)別的標(biāo)題，最多到六級(jí)標(biāo)題。注意#后需要加一個(gè)空格。
<u>書寫格式如下：</u>
#<空格>一級(jí)標(biāo)題
##<空格>二級(jí)標(biāo)題
###<空格>三級(jí)標(biāo)題
######<空格>六級(jí)標(biāo)題
<u>解析效果如下：</u>
一級(jí)標(biāo)題
二級(jí)標(biāo)題
三級(jí)標(biāo)題
六級(jí)標(biāo)題
另外一級(jí)標(biāo)題和二級(jí)標(biāo)題也可以使用雙下劃線和單下劃線來實(shí)現(xiàn)。
<u>書寫格式如下：</u>
一級(jí)標(biāo)題
======
二級(jí)標(biāo)題
------
<u>解析效果如下：</u>
一級(jí)標(biāo)題
二級(jí)標(biāo)題
1.2 加粗和斜體
markdown使用*和_來強(qiáng)調(diào)文本，使用一個(gè)*和_包圍的文本會(huì)被轉(zhuǎn)化為斜體，而用兩個(gè)*和_包圍的文本則會(huì)被轉(zhuǎn)化成加粗。
<u>書寫格式如下：</u>
*斜體文字*
_斜體文字_
**加粗文字**
__加粗文字__
<u>解析效果如下：</u>
斜體文字
斜體文字
加粗文字
加粗文字
1.3 段落和換行
Markdown中一個(gè)普通的段落不需要在首行縮進(jìn)，直接開始寫就是一個(gè)段落。當(dāng)你需要換到另外一個(gè)段落時(shí)，那么需要在上一段的段尾添加一個(gè)或多個(gè)空白行。
<u>書寫格式如下：</u>
開始第一段。。。寫完第一段。
<空行>
開始第二段。。。寫完第二段。
<u>解析效果如下：</u>
開始第一段。。。寫完第一段。
開始第二段。。。寫完第二段。
Markdown里回車后的文字默認(rèn)是緊接上文的，如果你需要換行，那么需要在行尾添加兩個(gè)以上的空格。
<u>書寫格式如下：</u>
開始第一段。。。準(zhǔn)備換行。<空格><空格>
另起一行。。。
<u>解析效果如下（注意換行和換段落的效果區(qū)別）：</u>
開始第一段。。。準(zhǔn)備換行。
另起一行。。。
1.4 列表
Markdown支持無序列表和有序列表。無序列表可以使用*，+，-三者中任意符號(hào)來標(biāo)記；有序列表則使用數(shù)字加.來標(biāo)記。注意標(biāo)記后面需要加上一個(gè)空格，有序列表的數(shù)字會(huì)被按順序自動(dòng)更正。
<u>書寫格式如下：</u>
*<空格>紅紅紅紅紅
*<空格>綠綠綠綠綠
*<空格>藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
+<空格>紅紅紅紅紅
+<空格>綠綠綠綠綠
+<空格>藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
-<空格>紅紅紅紅紅
-<空格>綠綠綠綠綠
-<空格>藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
1.<空格>紅紅紅紅紅
2.<空格>綠綠綠綠綠
3.<空格>藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
2.<空格>紅紅紅紅紅
3.<空格>綠綠綠綠綠
1.<空格>藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
<u>解析效果如下：</u>
- 紅紅紅紅紅
- 綠綠綠綠綠
- 藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
- 紅紅紅紅紅
- 綠綠綠綠綠
- 藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
- 紅紅紅紅紅
- 綠綠綠綠綠
- 藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
紅紅紅紅紅
綠綠綠綠綠
藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
紅紅紅紅紅
綠綠綠綠綠
藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)
注意，如果列表中的一項(xiàng)有多個(gè)段落，新的段落需要縮進(jìn)4個(gè)空格或1個(gè)tab。
<u>書寫格式如下：</u>
* 項(xiàng)目一，段落一
<空行>
<空格><空格><空格><空格>項(xiàng)目一，段落二
* 項(xiàng)目二，段落一
<空行>
<空格><空格><空格><空格>項(xiàng)目二，段落二
<u>解析效果如下：</u>
-
項(xiàng)目一，段落一
項(xiàng)目一，段落二
-
項(xiàng)目二，段落一
項(xiàng)目二，段落二
1.5 引用
在段落前添加一個(gè)>符號(hào)即可將該段落標(biāo)記為引用，注意>后需要添加一個(gè)空格。
<u>書寫格式如下：</u>
><空格>某某大牛曾經(jīng)說。。。<空格><空格>
某某大牛又說。。。
<u>解析效果如下：</u>
某某大牛曾經(jīng)說。。。
某某大牛又說。。。
繁瑣一點(diǎn)，你也可以在引用段落的每一行都加上>符號(hào)。并且>可以迭代使用，表示引用中的引用效果。
<u>書寫格式如下：</u>
> 某A大牛曾經(jīng)說。。。
>
> > 某B大牛曾經(jīng)說。。。
>
> 某A大牛接著說。。。
<u>解析效果如下：</u>
某A大牛曾經(jīng)說。。。
某B大牛曾經(jīng)說。。。
某A大牛接著說。。。
1.6 分割線
直接上例子吧，如下幾種方式都可以畫出漂亮的分割線。
<u>書寫格式如下：</u>
* * *
***
*****
- - -
---------------------------------------
<u>解析效果如下：</u>
1.7 插入鏈接
markdown文本中插入鏈接非常方便，有文內(nèi)鏈接和引用鏈接兩種方式。注意如果鏈接的是本地資源，則鏈接地址為當(dāng)?shù)刭Y源的路徑。
<u>書寫格式如下：</u>
## 文內(nèi)鏈接
這是一個(gè)文內(nèi)鏈接的[例子](http://example.com/ "鼠標(biāo)懸浮此處顯示的標(biāo)題")。
[這個(gè)](http://example.net/)鏈接在鼠標(biāo)懸浮時(shí)沒有標(biāo)題。
[這個(gè)](/about/)鏈接是本地資源。
## 引用鏈接
這是一個(gè)引用鏈接的[例子][id]。
[id]: http://example.com/ "鼠標(biāo)懸浮標(biāo)題（可選）"
## 注意，這里的id沒有大小寫區(qū)分，如果省略id，則前面方括號(hào)的內(nèi)容會(huì)被用作id。
我常用的網(wǎng)站包括[Google][1]，[Yahoo][2]和[MSN][3]。
[1]: http://google.com/ "Google"
[2]: http://search.yahoo.com/ "Yahoo Search"
[3]: http://search.msn.com/ "MSN Search"
## 也可以寫成
我常用的網(wǎng)站包括[Google][]，[Yahoo][]和[MSN][]。
[google]: http://google.com/ "Google"
[yahoo]: http://search.yahoo.com/ "Yahoo Search"
[msn]: http://search.msn.com/ "MSN Search"
<u>解析效果如下：</u>
這是一個(gè)文內(nèi)鏈接的例子。
這個(gè) 鏈接在鼠標(biāo)懸浮時(shí)沒有標(biāo)題。
這是一個(gè)引用鏈接的例子。
我常用的網(wǎng)站包括Google，Yahoo和MSN。
我常用的網(wǎng)站包括Google，Yahoo和MSN。
1.8 插入圖片
插入圖片和插入鏈接非常類似，只是在方括號(hào)前多一個(gè)!。
<u>書寫格式如下：</u>
## 方法一
## 方法二
![markdown logo][id]
[id]: http://upload-images.jianshu.io/upload_images/1787544-fff109c67ad3cba6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "圖標(biāo)2"
<u>解析效果如下：</u>
1.9 插入代碼
在文本中嵌入代碼也非常簡(jiǎn)潔，只需要用反引號(hào)`將代碼包圍起來即可。
<u>書寫格式如下：</u>
可以使用函數(shù)`print()`打印輸出。
## 如果代碼中需要加入反引號(hào)`號(hào)，則使用兩個(gè)``加空格來包裹
這里就是一個(gè)反引號(hào)`` ` ``。
在代碼里也可以保留反引號(hào)`` `print()` ``。
<u>解析效果如下：</u>
可以使用函數(shù)print()打印輸出。
這里就是一個(gè)反引號(hào)`。
在代碼里也可以保留反引號(hào)`print()`。
markdown中插入一整段代碼快也非常方便，只需要將代碼塊的每一行縮進(jìn)4個(gè)空格或一個(gè)tab。
<u>書寫格式如下：</u>
代碼如下:
<空格><空格><空格><空格>cat("hello world")
<空格><空格><空格><空格>cat("welcome to learn markdown")
<u>解析效果如下：</u>
代碼如下:
cat("hello world")
cat("welcome to learn markdown")
1.10 其他
在markdown中將鏈接地址或郵箱地址用<>包圍，則會(huì)被自動(dòng)轉(zhuǎn)換成可點(diǎn)擊的鏈接。
<u>書寫格式如下：</u>
<http://haoeric.com>
<haoeric0520@gmail.com>
<u>解析效果如下：</u>
如果需要避免文本中的符號(hào)被當(dāng)做markdown標(biāo)識(shí)符而發(fā)生不必要的格式轉(zhuǎn)化，可以在符號(hào)前加\來避免。
<u>書寫格式如下：</u>
\*不是斜體\*
<u>解析效果如下：</u>
*不是斜體*
markdown使用的特殊標(biāo)識(shí)符總結(jié)如下：
\ backslash
` backtick
* asterisk
_ underscore
{} curly braces
[] square brackets
() parentheses
# hash mark
+ plus sign
- minus sign (hyphen)
. dot
! exclamation mark
<a name="kramdown_markdown" id="kramdown_markdown"></a>
2 kramdown拓展
kramdown對(duì)原生的markdown加入了一些拓展，其中最重要的就是對(duì)表格的支持，其他主要的還包括定義，縮寫和角標(biāo)。
2.1 表格
表格的書寫格式一目了然，還是很方便簡(jiǎn)潔的。
<u>書寫格式如下：</u>
| 左對(duì)齊 | 中間對(duì)齊 | 右對(duì)齊 |
| :--- | :---: | ---: |
| 左1 | 中1 | 右1 |
| 左2 | 中2 | 右3 |
<u>解析效果如下：</u>
| 左對(duì)齊 | 中間對(duì)齊 | 右對(duì)齊 |
|---|---|---|
| 左1 | 中1 | 右1 |
| 左2 | 中2 | 右3 |
2.2 定義
對(duì)專有詞匯進(jìn)行定義。
<u>書寫格式如下：</u>
專有詞匯1
: 解釋1
: 解釋2
專有詞匯1
: 解釋
<u>解析效果如下：</u>
專有詞匯1
: 解釋1
: 解釋2
專有詞匯2
: 解釋
2.3 角標(biāo)
不同于鏈接，這里的角標(biāo)內(nèi)容會(huì)被放在文末，點(diǎn)擊可以實(shí)現(xiàn)跳轉(zhuǎn)。
<u>書寫格式如下：</u>
請(qǐng)參閱腳注1. [^1]
[^1]: 腳注1內(nèi)容。
請(qǐng)參閱腳注2. [^2]
[^2]: 腳注2內(nèi)容。
<u>解析效果如下：</u>
請(qǐng)參閱腳注1. [1]
請(qǐng)參閱腳注2. [2]
2.4 縮寫
可以全局定義縮寫，當(dāng)鼠標(biāo)懸浮縮寫詞時(shí)會(huì)顯示縮寫的全稱。
<u>書寫格式如下：</u>
下面我們一起來學(xué)習(xí)GFM。
*[GFM]: GitHub Flavored Markdown
<u>解析效果如下：</u>
下面我們一起來學(xué)習(xí)GFM。
*[GFM]: GitHub Flavored Markdown
*[HTML]: HyperText Markup Language
<a name="GFM_markdown" id="GFM_markdown"></a>
3. GitHub Flavored Markdown拓展
GFM取消了下劃線作為強(qiáng)調(diào)字體的標(biāo)識(shí)符，這樣方便在文中自由使用_。同時(shí)，GFM會(huì)對(duì)文本中的鏈接進(jìn)行自動(dòng)識(shí)別，不需要使用<>來標(biāo)記。另外GFM的幾個(gè)重要拓展列舉如下：
3.1 柵欄標(biāo)記代碼快
在GFM中，用戶可以使用```包圍代碼來標(biāo)記代碼塊。其實(shí)這也是kramdown的一個(gè)拓展，放在這里講，避免重復(fù)。
<u>書寫格式如下：</u>
```
function test() {
console.log("notice the blank line before this function?");
}
```
<u>解析效果如下：</u>
function test() {
console.log("notice the blank line before this function?");
}
3.2 代碼高亮
使用柵欄標(biāo)記代碼塊的一個(gè)好處是可以標(biāo)明代碼的語種，然后實(shí)現(xiàn)代碼的高亮。
<u>書寫格式如下：</u>
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
<u>解析效果如下：</u>
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
3.3 刪除線
<u>書寫格式如下：</u>
~~刪除內(nèi)容~~
<u>解析效果如下：</u>
刪除內(nèi)容
有關(guān)GFM的其他拓展，請(qǐng)查閱github-flavored-markdown。
4. HTML拓展
以上的語法基本可以滿足我們大部分寫作的需求。如果你還需要其他格式，那么不要忘了markdown本身是支持HTML標(biāo)簽的，這也就說明了markdown的強(qiáng)拓展性。以下列舉一些常用的HTML標(biāo)簽用法：
4.1 下劃線
<u>書寫格式如下：</u>
<u>下劃內(nèi)容</u>
<u>解析效果如下：</u>
<u>下劃內(nèi)容</u>
4.2 上標(biāo)
<u>書寫格式如下：</u>
E = mc<sup>2</sup>
<u>解析效果如下：</u>
E = mc2
4.3 下標(biāo)
<u>書寫格式如下：</u>
Water: H<sub>2</sub>O
<u>解析效果如下：</u>
Water: H2O
4.4 首行縮進(jìn)
markdown的段落默認(rèn)都是頂格寫，如果硬要縮進(jìn)可以通過如下方式實(shí)現(xiàn)。
<u>書寫格式如下：</u>
## 縮進(jìn)一個(gè)空格
?開始輸入
## 縮進(jìn)兩個(gè)空格
?開始輸入
<u>解析效果如下：</u>
開始輸入
開始輸入
4.5 內(nèi)部跳轉(zhuǎn)
使用如下HTML標(biāo)簽，可以實(shí)現(xiàn)在文本內(nèi)的跳轉(zhuǎn)。在長篇的文章中這個(gè)功能非常有用。
<u>書寫格式如下：</u>
## 設(shè)置跳轉(zhuǎn)標(biāo)簽
點(diǎn)此[標(biāo)簽](#錨點(diǎn))跳轉(zhuǎn)。
## 點(diǎn)擊以上標(biāo)簽則跳轉(zhuǎn)至有如下代碼的所在行
## 我將下行代碼放在了行文的"參考資料"行上面，點(diǎn)擊試一下
<a name="錨點(diǎn)" id="錨點(diǎn)"></a>
<u>解析效果如下：</u>
點(diǎn)此標(biāo)簽跳轉(zhuǎn)
4.6 改變插入圖片大小
markdown自身插入圖片時(shí)不會(huì)改變圖片大小，但是通過THML插入圖片可以修改圖片大小。
<u>書寫格式如下：</u>
[站外圖片上傳中……(3)]
<u>解析效果如下：</u>
[站外圖片上傳中……(4)]
4.7 插入視頻
視頻不能直接加載，但可以使用照片加鏈接的形式來模擬，比如：
<u>書寫格式如下：</u>
<a href="http://www.youtube.com/watch?feature=player_embedded&v=YOUTUBE_VIDEO_ID_HERE
" target="_blank"><img src="http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
<u>解析效果如下：</u>
<a href="http://www.youtube.com/watch?feature=player_embedded&v=FyfwLX4HAxM
" target="_blank"><img src="http://img.youtube.com/vi/FyfwLX4HAxM/0.jpg"
alt="IMAGE ALT TEXT HERE" width="240" height="180" border="10" /></a>
或者用存markdown,但是不能調(diào)整圖片大小：
<u>書寫格式如下：</u>
[](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE)
<u>解析效果如下：</u>
<a name="錨點(diǎn)" id="錨點(diǎn)"></a>
4. 參考資料
[1] markdown
[2] kramdown
[2] github markdown
[4] MarkDown使用小技巧
[5] 用Markdown寫blog的常用操作
[6] worldhello:輕量級(jí)標(biāo)記語言
[7] THE WORLD'S LARGEST WEB DEVELOPER SITE
