概述
Markdown 是一種用於網絡文本書寫的輕量級標記語言,廣泛用於個人 blog、github、wiki 中。其實瀏覽器並不能識別 Markdown 的語法,但許多 blog、wiki 平台以及 github 都內置了 Markdown 編輯器,編輯器會先把 Markdown 文本轉換成 HTML 格式的網頁,然后再把 HTML 網頁交給瀏覽器來顯示。除了上述的內置編輯器外,還有許多能解析 Markdown 語法的編寫工具,這些工具一般都提供瀏覽器預覽和導出成 HTML 或 PDF 文件的功能。
Markdown 的語法由一些符號定義,這些符號夾雜在文本中,用於控制文本的顯示方式。比如兩個星號可以給文字加粗**加粗**,這兩個星號在 Markdown 編輯器處理后就變成了 HTML 中的<strong>加粗</strong>標簽。相較於 Word 類型編輯器的“所見即所得”而言,Markdown 文件本身是純文本,並沒有格式,但通過 Markdown 語法符號能提供更加准確的 HTML 類型格式控制同時又沒有 HTML 那么難以書寫。
Markdown 的語法需要編輯器才能實現,因此編輯器可以按照自己的需求添加或者修改某個語法的含義。因此,基本上所有編輯器解析 Markdown 語法的方式都有些許差異,但大體上可以分成三類:
- Classic Markdown:最基礎的 Markdown 語法,所有的編輯器都支持
- Extra Markdown:擴展的 Markdown 語法,增加了表格等元素,不一定都能支持
- Github Markdown:github 文檔使用的 Markdown 語法,包含 Extra Markdown 的所有內容,還增加了代碼高亮、emoji表情等語法,目前許多 blog 平台(cnblogs,csdn)都支持這種語法
本文主要介紹 Classic 和 Github 的語法,對於只有 Github 支持的語法會用上標\(^g\)注明,同時就在使用 Markdown 中經常遇到的問題給出解決方案。作者希望能在一篇文章中將 Markdown 使用中經常遇到的問題做全面總結,若有錯漏,歡迎指正。
注:作者在編寫此文的過程中發現 cnblogs 的 Markdown 編輯器有個別地方處理不符合標准,代碼塊和引用塊的默認樣式有點丑,並且不支持預覽,請各位斟酌后使用。
語法
標題和段落
標題支持兩種語法:底線格式和井號格式。標題會轉換成 HTML 中的<h1><h2>等標簽,這對於自動生成目錄非常重要(Markdown 沒有自動生成目錄的語法,不過可以利用其他的方式)。
底線格式需要單獨一行,使用至少兩個=或-,只能處理兩階的標題。
標題1
===
標題2
---
井號格式使用 1~6 個的#,最多六階標題。行尾可以添加任意個#號,並不會被當作標題的一部分。
# 標題1 #
## 標題2
###### 標題6 ##

段落開頭不能使用空格或制表符縮進,連續的文本行會首位相連成為一個段落(cnblogs編輯器不會合成段落)。不同段落之間需要用一個或多個空行(空行可以包含空字符)分隔。如果想將連續的文本行解釋為兩個段落,在第一個文本上的末尾鍵入兩個空格后再換行。在生成 HTML 時,段落開頭的空格會被忽略或被解釋為代碼塊等格式,段落之間的所有空行都會被忽略。
行首空格、段間空行都被忽略。
連續文本行會被合成一段。(cnblogs編輯器仍然是兩段)
可以在第一行最后加兩個空格后換行
就可以分段了。
行首空格、段間空行都被忽略。
連續文本行會被合成一段。(cnblogs編輯器仍然是兩段)
可以在第一行加兩個空格后換行
就可以分段了。
鏈接和圖片
鏈接用於跳轉到其他頁面,包含行內式和參考式兩種樣式,還可以使用簡單的自動鏈接。跳轉地址可以用/開頭的相對路徑引用本機資源。
行內式:鏈接文字和跳轉地址寫在一起。如:
[an example](http://www.cnblogs.com/zhuyuanhao/ "鏈接title")
an example
參考式:鏈接文字和跳轉地址分開寫,通過[id]標識聯系起來。[id]標識可以包含字母、數字、空白和標點符號,但是並不區分大小寫。跳轉地址部分可以出現在文件的任意地方。
This is [an example][ID 2] reference-style link.
[id 2]: http://www.cnblogs.com/zhuyuanhao/ "可選title, 可以用單引號'、雙引號"或括號()包着,也可以另起一行並縮進"
[iD 3]: <http://www.cnblogs.com/zhuyuanhao/>
'跳轉地址也可以用尖括號包起來'
隱式參考鏈接:使用空標識[],在跳轉地址處使用鏈接文字作為標識。
[Google][]
[Google]: http://google.com/ "Google Inc."
自動鏈接:對於網址和電子郵件信箱,只要是用尖括號包起來,Markdown 就會自動把它轉成鏈接,鏈接文字和跳轉地址相同。
<http://www.cnblogs.com/zhuyuanhao/>
<address@example.com>
http://www.cnblogs.com/zhuyuanhao/
address@example.com
圖片用於在當前頁面顯示圖片,也包含行內式和參考式,只需要在鏈接的樣式前加一個驚嘆號!,就會被識別為圖片。可以使用相對路徑引用本地的圖片,也能使用 url 引用其他網站的圖片。不過到目前為止,Markdown 還沒有辦法指定圖片的寬高。
行內式:

參考式:
![Alt text][id]
[id]: url/to/image "Optional title attribute"
引用塊
引用塊使用右尖括號>標識,可以在每行都加上>,也可以只在段落的第一行加>。
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Donec sit amet nisl.
Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

可以使用多個>表示引用塊的不同層級。
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

引用的區塊內也可以使用其他的 Markdown 語法,包括標題、列表、代碼塊等。
> ## This is a header.
>
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
> return shell_exec("echo $input | $markdown_script");
代碼
代碼可以用行內代碼或者代碼塊來表示。
行內代碼使用一個或多個重音符號來表示代碼區域,起始和結束的重音符號個數必須相同。
Use the `printf()` function.
Use the printf() function.
如果想在代碼區域內插入k個重音符號,可以用k+1個重音符號來開啟和結束代碼區段。
There is a literal ```backtick (``)``` here.
There is a literal backtick (``) here.
如果在起始和結束端都插入空格,就可以在區域的一開始就插入重音符號。
A single backtick in a code span: `` ` ``
A backtick-delimited string in a code span: `` `foo` ``
A single backtick in a code span: `
A backtick-delimited string in a code span: `foo`
Classic 代碼塊使用每行縮進的 4 個空格或是 1 個制表符來表示。在轉換成 HTML 時,每行行首的 4 個空格或 1 個制表符縮進會被移除,其余的空格或制表符會被保留。另外,一般在代碼塊中的 Markdown 語法符號不會被轉換。
Here is an example of AppleScript:
tell application "Foo"
**beep**
end tell
Here is an example of AppleScript:
tell application "Foo"
**beep**
end tell
Github 代碼塊使用三個或以上重音符號(```)放在代碼塊的前一行和后一行。在前一行重音符的后面加上語言名稱,可以按照該語言的語法對代碼塊內容高亮。如果要在代碼塊中顯示三個重音符,用四個重音符來表示代碼塊起止即可。支持的編程語言參見the languages YAML file,如果要使用沒有語法高亮的代碼塊,用plain標記。
```ruby
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
```
require 'redcarpet'
markdown = Redcarpet.new("Hello World!")
puts markdown.to_html
列表
列表包括無序列表和有序列表兩類。列表的每一項都使用標記 + 分隔(至少一個空格或制表符) + 段落的格式,段落的內容可以跨行,用空格縮進,還可以包含代碼塊、引用塊等。如果在一個列表項里添加用空行隔開的多個段落,需要在每個段落開頭添加至少兩個空格。如果要表示多級列表,需要在下一級列表標記前加上至少兩個空格或一個制表符,多級列表可以混用不同的標記(cnblogs的 Markdown 不支持多級列表)。
無序列表使用星號*、加號+或是減號-作為列表標記,標記不能混用,否則會視為不同的列表。
有序列表則使用數字和一個英文句點表示,數字的內容是任意的,並不會影響 HTML 顯示的數字。有時不需要列表,但在段落開頭的文字是數字加句點的格式,為了不被 Markdown 解析成列表,需要在句點前加上反斜線,如:2016\. Something Begin.
+ 無序列表項1
+ 無序列表項2
+ 下一級列表
2. 再下一級列表1
2. 再下一級列表2
- 不同標記視為不同列表
- 列表還可以
```c
# 包含代碼塊
int a = 10;
```
- 或者引用
> I have a dream!
- 以及多行或多段。
第二行
第二段
2016\. Something Begin.

表格\(^g\)
表格只能用在Extra Markdown或Github Markdown中。用豎線|和連字符-表示,豎線用於分隔表格中的不同列,連字符用於分開表頭和表格主體,連字符添加冒號:還可以控制單元格對齊方式。書寫時,豎線沒有對齊要求,行首行尾的豎線可以省略,表頭下需要至少三個連字符分隔。
表格內容可以包含 Mardown 行內格式,不能添加引用、列表、多行文本,可以包含代碼行,不能用代碼塊。若要書寫豎線,需要用反斜線轉義\|(cnblogs編輯器支持有問題)。
| 默認左對齊 | 左對齊 | 中對齊 | 右對齊 |
| ------ | :--- | :---: | ---: |
頭尾的豎線可以省略 | 對齊 | 對齊 | 對齊
| **加粗** | `int a;` | 豎線 \| | 鏈接[Google](www.google.com) |
| 默認左對齊 | 左對齊 | 中對齊 | 右對齊 |
|---|---|---|---|
| 頭尾的豎線可以省略 | 對齊 | 對齊 | 對齊 |
| 加粗 | int a; |
豎線 | 鏈接Google |
文字樣式和轉義符號
文字樣式包括加粗、斜體、刪除線。其中 Classic Markdown 不支持刪除線。加粗用**或__表示,斜體用*或_表示,刪除線用~~表示。如果樣式符號兩邊都沒有文字的話,會被當作普通符號,如:** 符號 **效果為 ** 符號 **
| 樣式 | 語法 | 舉例 | 效果 |
|---|---|---|---|
| 加粗 | **或__ |
**文本**或 __文本__ |
文本或 文本 |
| 斜體 | *或_ |
*文本*或 _文本_ |
文本或_文本_ |
| 刪除線 | ~~ |
~~文本~~ |
|
| 混合 | 將上述符號混合 | **~~文本~~*混合* **效果 |
** |
對於 Markdown 中的語法符號,前面加反斜線\即可顯示符號本身。包括
\\ 反斜線
\` 重音號
\* 星號
\_ 下划線
\{\} \[\] \(\) 括號
\# 井號
\+ 加號
\- 減號
\. 句點
\! 驚嘆號
\ 反斜線
` 重音號
* 星號
_ 下划線
{} [] () 括號
# 井號
+ 加號
- 減號
. 句點
! 驚嘆號
分割線用三個以上的星號*、減號-或下划線_表示,符號之間可以用空格分開但行內不能有其他非空白符號。
***
- - -
_______
任務列表\(^g\)和emoji表情\(^g\)
Github Markdown 支持任務列表樣式和 emoji 表情符號。(cnblogs編輯器里,這兩項的支持都不是很好)
任務列表需要在 Markdown 列表項的段落部分用[ ]開頭,也可以用[x]開頭表示一個已選擇的任務項。
- [x] 學習 Markdown
- [ ] 使用 Markdown
1. [ ] 寫博客

emoji表情使用:EMOJICODE:的格式,詳細的表情列表參見EMOJI CHEAT SHEET。
:man: :thumbsup: :sunny: :bug:

在 Github 平台還有兩個特殊的功能:使用@user/team來通知用戶或者用戶組或使用#number引用某個 Issue 或者 Pull Request。這兩個功能只在 Github 平台有效,這里就不詳述了,可以參考mentioning-users-and-teams。
HTML 標簽
Markdown 中可以直接書寫大部分 HTML 標簽。其中在 HTML 的區塊類型標簽<div>、<table>、<pre>、<p> 等內的,Markdown 語法會失效,在 HTML 行內型標簽<span>、<cite>、<del> 等內,Markdown 語法仍然有效。需要注意的是,在 HTML 標簽內,書寫特殊字符 < 和 & 仍然需要用它們的替代形式 < 和 &表示。在 Markdown 中,也能用 < 和 & 的這種特殊形式。
This is <a href="http://cn.bing.com/images/search?q=markdown&go=Submit+Query">Markdown</a> regular paragraph.
1 < 3 & 5
2 < 4 & 6
<table border="1" bgcolor="yellowgreen">
<tr>
<td>**count** 1 </td>
<td>**count** 2 < 4 & 6</td>
</tr>
</table>
This is **<em>another regular** paragraph</em>.
This is Markdown regular paragraph.
1 < 3 & 5
2 < 4 & 6
| **count** 1 | **count** 2 < 4 & 6 |
支持 Tex 公式
在 Markdown 中添加 Tex 公式有兩種方式:請求外部服務器生成或者本地生成
外部服務器生成方式是發送 Tex 公式到外部服務器,然后服務器會將 Tex 公式的圖片發送回來,這種方式不能處理復雜的 Tex 語法。使用 HTML <img>標簽,將 Tex 公式寫在 <img>標簽的 url 鏈接的參數里。如:
Google Chart服務器
<img src="http://chart.googleapis.com/chart?cht=tx&chl=\Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">
forkosh服務器
<img src="http://www.forkosh.com/mathtex.cgi? \Large x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}">
本地生成方式將 Tex 解析腳本插入到 HTML 文件的<head>標簽中,在 HTML 文件渲染的過程中生成 Tex 公式,當網頁中 Tex 公式比較多時速度會變慢。推薦使用 MathJax 引擎來實現,通過將下列 JS 腳本嵌入到生成的 HTML 文件<head>標簽中,就能解析 Tex 公式了。Markdown 文件不應包含 <script> 標簽,一般是通過修改 Markdown 編輯器的設置來自動添加。
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
行間公式($$Tex$$):$$x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}$$
行內公式($Tex$或\\(Tex\\)):\\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\\)
\(x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}\)
csdn 的 Markdown 編輯器默認支持 Tex 公式,cnblogs 需要在博客“選項”中選中“啟用數學公式支持”,MarkdownPad2 需要在Tools > Options > Advanced > HTML Head Editor中添加 MathJax 引擎,在F6預覽中顯示 Tex 公式。
免費編輯器
書寫 Markdown 離不開編輯器。這里羅列各個平台下的免費編輯器供參考
| 平台 | 編輯器 |
|---|---|
| Windows | MarkdownPad2 |
| Mac | Mou |
| Linux | ReText |
| 線上編輯器 | Dillinger.io、StackEdit |
| 博客平台 | cnblogs、csdn、簡書 |
| Chrome插件 | Markdown Preview Plus |
另外,Sublime、Vim都帶有 Markdown 預覽插件。
免費圖床
Markdown 文件本身不能包含圖片。因此,要發布帶圖片的 Markdown 文章,就需要先將圖片存放在網絡上,通過 url 地址引用圖片:。博客平台一般會提供圖片上傳服務,這樣就可以在博客中引用圖片的 url ,但是轉發到博客外部就不一定能訪問。網絡圖床服務器中的圖片能在所有地方訪問,但也有網絡失效或者服務器關閉的風險。
這里羅列幾個比較好用的圖床服務器
| 地址 | 說明 |
|---|---|
| https://sm.ms/ | 國際圖床,無注冊、不限流量 |
| Github | 可以把圖片上傳到github上 |
| https://portal.qiniu.com | 國內雲存儲服務七牛雲,需注冊、有流量限制,但可以自己控制 |
| http://yotuku.cn/ | 國內圖床,無注冊、不限流量 |
參考鏈接
Classsic Markdown:http://daringfireball.net/projects/markdown/syntax/
Classsic Markdown的翻譯版:http://wowubuntu.com/markdown/
Extra Markdown:https://michelf.ca/projects/php-markdown/extra/
Github Markdown:https://help.github.com/categories/writing-on-github/
MathJax:https://www.mathjax.org/
