讓你的Markdown用起來(lái)得心應(yīng)手

文字的發(fā)明和使用使得信息的保存和傳遞有了革命性的飛躍。隨著信息的豐富和傳遞方式的革新，人們對(duì)文本提出了新的格式化的要求，以此來(lái)方便人們更舒適地獲取信息。如此，HTML(HyperText Markup Language)作為一種超文本標(biāo)記語(yǔ)言(markup language)應(yīng)運(yùn)而生，無(wú)數(shù)的網(wǎng)頁(yè)從此有了主次分明，層次清晰的格式。如果將HTML比作一架重機(jī)槍，那么Markdown就是一把手槍，滿足了主要的文本格式標(biāo)記的需求，可是操作性卻大大簡(jiǎn)化。秉承「易讀易寫(xiě)」的宗旨，Markdown作為一種輕量級(jí)標(biāo)記語(yǔ)言(lightweight markup language)，讓無(wú)數(shù)的程序猿和文字工作者愛(ài)不釋手。學(xué)習(xí)Markdown，投資短，見(jiàn)效快，提高生活品質(zhì)立竿見(jiàn)影，那么還有什么阻止你不去學(xué)習(xí)。

有那么一小撮人，為了滿足自己某個(gè)特定的需要，它們不甘妥協(xié)，走進(jìn)小黑屋，點(diǎn)亮屏幕，一段指尖與智慧的狂舞后，皺緊的眉頭終于舒展開(kāi)來(lái)，隨后露出滿意的笑容。Linus Torvalds如此打造了Linux, Rasmus Lerdorf如此貢獻(xiàn)出了PHP, John Gruber和Aaron Swartz如此開(kāi)創(chuàng)了Markdown。Markdown的誕生就是因?yàn)檫@哥倆想要『使用一種易讀易寫(xiě)的純文本格式來(lái)編寫(xiě)文檔，并且可以被轉(zhuǎn)換成XHTML(或者HTML)文檔』。2004年，Markdown橫空出世，從此紅遍大江南北。如今 Markdown深受程序猿所愛(ài)，并且已成了眾多優(yōu)秀工具的標(biāo)配，比如Github, Stack Overflow，簡(jiǎn)書(shū)，為知筆記，etc。

原生的Markdown文本轉(zhuǎn)換是使用Perl實(shí)現(xiàn)的，其語(yǔ)法吸收了眾家之長(zhǎng)，包括Setext，atx，Textile，reStructuredText，Grutatext，EtText以及最原始的郵件格式。原生的Markdown語(yǔ)法簡(jiǎn)潔明了(使用特殊標(biāo)點(diǎn)符號(hào)來(lái)標(biāo)記格式)并且同時(shí)支持HTML標(biāo)簽。之后不同編程語(yǔ)言實(shí)現(xiàn)的Markdown版本(Markdown解析器)也相繼而生。不同的解析器對(duì)原生的Markdown語(yǔ)法進(jìn)行了少許的擴(kuò)展。其中較為流行的是用Ruby實(shí)現(xiàn)的版本kramdown。大名鼎鼎的GitHub就采用kramdown作為其Markdown的解析器(Starting May 1st 2016)。這里我們從原生的markdown語(yǔ)法介紹起，然后再來(lái)學(xué)習(xí)kramdown和github-flavored-markdown對(duì)原生語(yǔ)法進(jìn)行的一些拓展?；ㄉ鲜昼娮x讀本文，沒(méi)準(zhǔn)你會(huì)愛(ài)上Markdown。再花點(diǎn)時(shí)間練一練，讓你的markdown使用起來(lái)得心應(yīng)手，從此寫(xiě)起文章來(lái)一氣呵成。

<a name="original_markdown" id="original_markdown"></a>

1. 原生態(tài)Markdown標(biāo)記語(yǔ)法

1.1 標(biāo)題

Markdown通過(guò)在行首添加1-6個(gè)#符號(hào)來(lái)定義不同級(jí)別的標(biāo)題，最多到六級(jí)標(biāo)題。注意#后需要加一個(gè)空格。

<u>書(shū)寫(xiě)格式如下：</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)題也可以使用雙下劃線和單下劃線來(lái)實(shí)現(xiàn)。

<u>書(shū)寫(xiě)格式如下：</u>

一級(jí)標(biāo)題
======

二級(jí)標(biāo)題
------

<u>解析效果如下：</u>

一級(jí)標(biāo)題

二級(jí)標(biāo)題

1.2 加粗和斜體

markdown使用*和_來(lái)強(qiáng)調(diào)文本，使用一個(gè)*和_包圍的文本會(huì)被轉(zhuǎn)化為斜體，而用兩個(gè)*和_包圍的文本則會(huì)被轉(zhuǎn)化成加粗。

<u>書(shū)寫(xiě)格式如下：</u>

*斜體文字*

_斜體文字_

**加粗文字**

__加粗文字__

<u>解析效果如下：</u>

斜體文字

斜體文字

加粗文字

加粗文字

1.3 段落和換行

Markdown中一個(gè)普通的段落不需要在首行縮進(jìn)，直接開(kāi)始寫(xiě)就是一個(gè)段落。當(dāng)你需要換到另外一個(gè)段落時(shí)，那么需要在上一段的段尾添加一個(gè)或多個(gè)空白行。

<u>書(shū)寫(xiě)格式如下：</u>

開(kāi)始第一段。。。寫(xiě)完第一段。
<空行>
開(kāi)始第二段。。。寫(xiě)完第二段。

<u>解析效果如下：</u>

開(kāi)始第一段。。。寫(xiě)完第一段。

開(kāi)始第二段。。。寫(xiě)完第二段。

Markdown里回車(chē)后的文字默認(rèn)是緊接上文的，如果你需要換行，那么需要在行尾添加兩個(gè)以上的空格。

<u>書(shū)寫(xiě)格式如下：</u>

開(kāi)始第一段。。。準(zhǔn)備換行。<空格><空格>
另起一行。。。

<u>解析效果如下（注意換行和換段落的效果區(qū)別）：</u>

開(kāi)始第一段。。。準(zhǔn)備換行。
另起一行。。。

1.4 列表

Markdown支持無(wú)序列表和有序列表。無(wú)序列表可以使用*，+，-三者中任意符號(hào)來(lái)標(biāo)記；有序列表則使用數(shù)字加.來(lái)標(biāo)記。注意標(biāo)記后面需要加上一個(gè)空格，有序列表的數(shù)字會(huì)被按順序自動(dòng)更正。

<u>書(shū)寫(xiě)格式如下：</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)

  1. 紅紅紅紅紅

  2. 綠綠綠綠綠

  3. 藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)

  4. 紅紅紅紅紅

  5. 綠綠綠綠綠

  6. 藍(lán)藍(lán)藍(lán)藍(lán)藍(lán)

注意，如果列表中的一項(xiàng)有多個(gè)段落，新的段落需要縮進(jìn)4個(gè)空格或1個(gè)tab。

<u>書(shū)寫(xiě)格式如下：</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>書(shū)寫(xiě)格式如下：</u>

><空格>某某大牛曾經(jīng)說(shuō)。。。<空格><空格>
某某大牛又說(shuō)。。。

<u>解析效果如下：</u>

某某大牛曾經(jīng)說(shuō)。。。
某某大牛又說(shuō)。。。

繁瑣一點(diǎn)，你也可以在引用段落的每一行都加上>符號(hào)。并且>可以迭代使用，表示引用中的引用效果。

<u>書(shū)寫(xiě)格式如下：</u>

> 某A大牛曾經(jīng)說(shuō)。。。
>
> > 某B大牛曾經(jīng)說(shuō)。。。
>
> 某A大牛接著說(shuō)。。。

<u>解析效果如下：</u>

某A大牛曾經(jīng)說(shuō)。。。

某B大牛曾經(jīng)說(shuō)。。。

某A大牛接著說(shuō)。。。

1.6 分割線

直接上例子吧，如下幾種方式都可以畫(huà)出漂亮的分割線。

<u>書(shū)寫(xiě)格式如下：</u>

* * *

***

*****

- - -

---------------------------------------

<u>解析效果如下：</u>

1.7 插入鏈接

markdown文本中插入鏈接非常方便，有文內(nèi)鏈接和引用鏈接兩種方式。注意如果鏈接的是本地資源，則鏈接地址為當(dāng)?shù)刭Y源的路徑。

<u>書(shū)寫(xiě)格式如下：</u>

## 文內(nèi)鏈接
這是一個(gè)文內(nèi)鏈接的[例子](http://example.com/ "鼠標(biāo)懸浮此處顯示的標(biāo)題")。

[這個(gè)](http://example.net/)鏈接在鼠標(biāo)懸浮時(shí)沒(méi)有標(biāo)題。

[這個(gè)](/about/)鏈接是本地資源。

## 引用鏈接

這是一個(gè)引用鏈接的[例子][id]。

[id]: http://example.com/  "鼠標(biāo)懸浮標(biāo)題（可選）"

## 注意，這里的id沒(méi)有大小寫(xiě)區(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"
  
## 也可以寫(xiě)成

我常用的網(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í)沒(méi)有標(biāo)題。

這是一個(gè)引用鏈接的例子。

我常用的網(wǎng)站包括Google，Yahoo和MSN。

我常用的網(wǎng)站包括Google，Yahoo和MSN。

1.8 插入圖片

插入圖片和插入鏈接非常類似，只是在方括號(hào)前多一個(gè)!。

<u>書(shū)寫(xiě)格式如下：</u>

## 方法一

![markdown logo](http://upload-images.jianshu.io/upload_images/1787544-fff109c67ad3cba6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "圖標(biāo)1")

## 方法二

![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>

markdown logo
markdown logo
markdown logo

1.9 插入代碼

在文本中嵌入代碼也非常簡(jiǎn)潔，只需要用反引號(hào)`將代碼包圍起來(lái)即可。

<u>書(shū)寫(xiě)格式如下：</u>


可以使用函數(shù)`print()`打印輸出。

## 如果代碼中需要加入反引號(hào)`號(hào)，則使用兩個(gè)``加空格來(lái)包裹

這里就是一個(gè)反引號(hào)`` ` ``。

在代碼里也可以保留反引號(hào)`` `print()` ``。

<u>解析效果如下：</u>

可以使用函數(shù)print()打印輸出。

這里就是一個(gè)反引號(hào)`。

在代碼里也可以保留反引號(hào)`print()`。

markdown中插入一整段代碼快也非常方便，只需要將代碼塊的每一行縮進(jìn)4個(gè)空格或一個(gè)tab。

<u>書(shū)寫(xiě)格式如下：</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>書(shū)寫(xiě)格式如下：</u>

<http://haoeric.com>

<haoeric0520@gmail.com>

<u>解析效果如下：</u>

http://haoeric.com

haoeric0520@gmail.com

如果需要避免文本中的符號(hào)被當(dāng)做markdown標(biāo)識(shí)符而發(fā)生不必要的格式轉(zhuǎn)化，可以在符號(hào)前加\來(lái)避免。

<u>書(shū)寫(xiě)格式如下：</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ì)表格的支持，其他主要的還包括定義，縮寫(xiě)和角標(biāo)。

2.1 表格

表格的書(shū)寫(xiě)格式一目了然，還是很方便簡(jiǎn)潔的。

<u>書(shū)寫(xiě)格式如下：</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>書(shū)寫(xiě)格式如下：</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>書(shū)寫(xiě)格式如下：</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 縮寫(xiě)

可以全局定義縮寫(xiě)，當(dāng)鼠標(biāo)懸浮縮寫(xiě)詞時(shí)會(huì)顯示縮寫(xiě)的全稱。

<u>書(shū)寫(xiě)格式如下：</u>

下面我們一起來(lái)學(xué)習(xí)GFM。

*[GFM]: GitHub Flavored Markdown

<u>解析效果如下：</u>

下面我們一起來(lái)學(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í)別，不需要使用<>來(lái)標(biāo)記。另外GFM的幾個(gè)重要拓展列舉如下：

3.1 柵欄標(biāo)記代碼快

在GFM中，用戶可以使用```包圍代碼來(lái)標(biāo)記代碼塊。其實(shí)這也是kramdown的一個(gè)拓展，放在這里講，避免重復(fù)。

<u>書(shū)寫(xiě)格式如下：</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)明代碼的語(yǔ)種，然后實(shí)現(xiàn)代碼的高亮。

<u>書(shū)寫(xiě)格式如下：</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>書(shū)寫(xiě)格式如下：</u>

~~刪除內(nèi)容~~

<u>解析效果如下：</u>

刪除內(nèi)容

有關(guān)GFM的其他拓展，請(qǐng)查閱github-flavored-markdown。

4. HTML拓展

以上的語(yǔ)法基本可以滿足我們大部分寫(xiě)作的需求。如果你還需要其他格式，那么不要忘了markdown本身是支持HTML標(biāo)簽的，這也就說(shuō)明了markdown的強(qiáng)拓展性。以下列舉一些常用的HTML標(biāo)簽用法：

4.1 下劃線

<u>書(shū)寫(xiě)格式如下：</u>

<u>下劃內(nèi)容</u>

<u>解析效果如下：</u>

<u>下劃內(nèi)容</u>

4.2 上標(biāo)

<u>書(shū)寫(xiě)格式如下：</u>

E = mc<sup>2</sup>

<u>解析效果如下：</u>

E = mc2

4.3 下標(biāo)

<u>書(shū)寫(xiě)格式如下：</u>

Water: H<sub>2</sub>O

<u>解析效果如下：</u>

Water: H2O

4.4 首行縮進(jìn)

markdown的段落默認(rèn)都是頂格寫(xiě)，如果硬要縮進(jìn)可以通過(guò)如下方式實(shí)現(xiàn)。

<u>書(shū)寫(xiě)格式如下：</u>

## 縮進(jìn)一個(gè)空格
?開(kāi)始輸入

## 縮進(jìn)兩個(gè)空格
?開(kāi)始輸入

<u>解析效果如下：</u>

開(kāi)始輸入

開(kāi)始輸入

4.5 內(nèi)部跳轉(zhuǎn)

使用如下HTML標(biāo)簽，可以實(shí)現(xiàn)在文本內(nèi)的跳轉(zhuǎn)。在長(zhǎng)篇的文章中這個(gè)功能非常有用。

<u>書(shū)寫(xiě)格式如下：</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ì)改變圖片大小，但是通過(guò)THML插入圖片可以修改圖片大小。

<u>書(shū)寫(xiě)格式如下：</u>

[站外圖片上傳中……(3)]

<u>解析效果如下：</u>

[站外圖片上傳中……(4)]

4.7 插入視頻

視頻不能直接加載，但可以使用照片加鏈接的形式來(lái)模擬，比如：

<u>書(shū)寫(xiě)格式如下：</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)整圖片大?。?/p>

<u>書(shū)寫(xiě)格式如下：</u>

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](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寫(xiě)blog的常用操作
[6] worldhello:輕量級(jí)標(biāo)記語(yǔ)言
[7] THE WORLD'S LARGEST WEB DEVELOPER SITE

  1. 腳注1內(nèi)容。 ?

  2. 腳注2內(nèi)容。 ?

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容