Markdown簡明教程
Markdown是什麼
Markdown是一種輕量級標記語言,它允許人們“使用易讀易寫的純文字格式編寫文件,然後轉換成有效的XHTML(或者HTML)文件”。
作者:約翰.格魯伯 (John Gruber),這裡是他部落格上有關Markdown語法的文章
作者:亞倫.斯沃茲 (Aaron Swartz) (已故)
為什麼使用Markdown
-
很多人在用,各大主要實現的開源工程非常活躍。
-
簡潔,提高文件撰寫效率。
-
只與文件內容有關,與文件樣式無關,便於調整樣式。
-
基於純文字格式,便於搜尋。
-
有豐富的直譯器或工具支援。
標準語法
強調
斜體
*斜體*
_斜體_
粗體
**粗體**
__粗體__
換行
在行末輸入兩個空格然後回車即可實現文字的強制換行。
標題
主標題
-
主標題
----------
主標題
=
主標題
==========
# H1標題
## H2標題
### H3標題
#### H4標題
##### H5標題
###### H6標題
數字列表
-
紅
-
黃
-
藍
1. 紅
2. 黃
3. 藍
2. 紅
1. 黃
3. 藍
符號列表
-
紅
-
黃
-
藍
* 紅
* 黃
* 藍
+ 紅
+ 黃
+ 藍
- 紅
- 黃
- 藍
層級式列表
-
顏色
-
紅
-
紫紅
-
橘紅
-
-
黃
-
藍
-
暗藍
-
亮藍
-
孔雀藍
-
-
* 顏色
1. 紅
+ 紫紅
+ 橘紅
2. 黃
3. 藍
- 暗藍
- 亮藍
- 孔雀藍
引用
這是一段引用文字
> 這是一段引用文字
這是一段引用文字
巢狀引用文字
巢狀引用文字
> 這是一段引用文字
>> 巢狀引用文字
>>> 巢狀引用文字
水平分割線
三個或更多*
號為分割線
***
---
程式碼段
使用一個反單引號可以生成一個行內程式碼塊
`行內程式碼塊`
行起始為4個空格或1個Tab佔位符則後續文字將被識別為程式碼段
//程式碼段演示
function aaa(){
alert("一段javascript程式碼");
}
圖片
![演示無效圖片](http:// "無效圖片")
![演示本地路徑圖片](./imgs/admin.png '本地路徑圖片')
![演示遠端路徑圖片](http://www.baidu.com/img/bdlogo.gif "遠端路徑圖片")
![演示參考連結圖片][002]
[002]: https://img-blog.csdn.net/20140325110441140?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHh6eQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast "參考連結圖片"
連結
[內聯樣式連結](http://example.com "提示文字")
[參考樣式連結描述文字A][001]
[參考樣式連結描述文字B][001]
[001]: http://about:blank "提示文字"
或
[001]: http://about:blank '提示文字'
或
[001]: http://about:blank (提示文字)
內聯HTML標記
在MD文件裡,你可以插入原生HTML標記,如:
一段紅色文字
<font color='red' style='font-size:20pt'>一段紅色文字</font>
第一列 | 第二列 |
---|---|
第一行 | 文字1 |
第一行 | 文字2 |
<table>
<thead>
<tr>
<th>第一列</th>
<th>第二列</th>
</tr>
</thead>
<tbody>
<tr>
<td>第一行</td>
<td>文字1</td>
</tr>
<tr>
<td>第二行</td>
<td>文字2</td>
</tr>
</tbody>
</table>
目錄(toc)
-
功能
此外掛可以在文件內根據標題自動生成目錄。
-
用法
在文件起始處放置
[toc]
或者[TOC]
標記即可讓解析器自動生成目錄。
-
功能
在文件裡通過簡單標記插入表格。
-
用法
Markdown對錶格的支援比較簡陋,但可以滿足一般的簡單表格的展現需求。
注意:Markdown原生就支援內聯HTML標記,因此,你也可以通過內聯HTML的TABLE標記將表格插入到文件內。
- 例子
第一列 | 第二列 | 第三列 | 第四列 |
---|---|---|---|
第一行 | 文字二 | 文字三 | 文字四 |
第二行 | 文字二 | 文字三 | 文字四 |
第一列 | 第二列 | 第三列 | 第四列
----- | ----- | ----- | -----
第一行 | 文字二 | 文字三 | 文字四
第二行 | 文字二 | 文字三 | 文字四
第一列 | 第二列 | 第三列 | 第四列 | 第五列 | 第六列 | 第七列 | 第八列 |
---|---|---|---|---|---|---|---|
第一行 | 文字二 | 文字三 | 跨兩列文字 | 文字六 | 文字七 | 文字八 | |
第二行 | 文字二 | 文字三 | 這是一段 長文字 |
文字五 | 文字六 | 文字七 | 文字八 |
第一列 | 第二列 | 第三列 | 第四列 | 第五列 | 第六列 | 第七列 | 第八列
----- | ----- | ----- | ----- | ----- | ----- | ----- | -----
第一行 | _文字二_ | 文字三 | **跨兩列文字** | 文字六 | 文字七 | 文字八
第二行 | 文字二 | 文字三 | 這是一段<br/>長文字 | 文字五 | <font color='green'>文字六</font> | 文字七 | 文字八
注意:由上面這個表格可知 tables 的表格不支援合併單元格!
公式(mathjax)
-
功能
在文件中通過 MathJax 標記插入公式。
-
用法
此外掛基於開源公式顯示引擎 MathJax (語法為類LaTex標記語言,最終輸出W3C的MathML標記語言)
-
例子
可以支援像 \(\frac{\pi}{2}\) $\pi$ 這樣的內聯公式。
markdown 可以支援像 \\(\frac{\pi}{2}\\) $\pi$ 這樣的內聯公式。
也可以是非內聯的,如:
$$F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt$$\[\int_0^1 f(t) \mathrm{d}t\]
\[\sum_j \gamma_j^2/d_j\]
```markdown
$$F(\omega) = \frac{1}{\sqrt{2\pi}} \int_{-\infty}^{\infty} f(t) \, e^{ - i \omega t}dt$$\\[\int_0^1 f(t) \mathrm{d}t\\] \\[\sum_j \gamma_j^2/d_j\\]
```
注意: MathJax 一般都需要訪問網路,因此保證網路暢通才能正常顯示。大多數流行的瀏覽器 都支援MathJax 。MathJax的語法 是類LaTex語法,標記繁多而複雜,不便於記憶。
-
功能
在大型文件系統裡,一般都有內容跳轉功能,這種跳轉通過連結實現,並且此功能必須基於設定在DOM元素上的
id
屬性才能完成。這個擴充套件就能夠指定某個標題的id
屬性。 -
用法
你需要在要設定
id
屬性的標題文字後加上#{#id-attr-value}
,其中id-attr-value
是id
屬性的值: -
例子
[跳轉到“常用擴充套件”章節][self-md-ext]
[self-md-ext]: #md-ext
GitHub特性標記
注意:大多數MD解析器現在都支援全部或部分GitHub特性標記,但是在使用它們之前請還是要先確定一下是否支援!
程式碼段
與標準標記不同,GitHub風格的MD程式碼段是以兩組三個連續的反單引號標記來標識,並且在第一組三個反單引號之後可以緊跟指定的程式碼語言名稱,如:
javascript程式碼段定義:
```js
function aaa(){
alert("一個javascript程式碼段");
}
```
Python程式碼段定義:
```python
import random
class CardGame(object):
""" a sample python class """
NB_CARDS = 32
def __init__(self, cards=5):
self.cards = random.sample(range(self.NB_CARDS), 5)
print 'ready to play'
```
小圖示
GitHub風格的MD標記可以讓你將一些預置的小圖示加入到文件內。
:+1: :heart: :beer:
:+1: :heart: :beer:
注意:所有這些圖示資源都放在GitHub的伺服器上而不是本地!解析器生成的HTML連結也是指向GitHub的伺服器!
其他特性
更多GitHub特性Markdown語法請看這裡
最佳實踐
-
儘量不要在MD文件內使用內聯HTML標記,增強相容性。
-
將所有的參考式連結(包括圖片參考連結)定義在MD文件的最後,便於維護。
-
儘量使用標準語法,少用或不用不流行的擴充套件語法或特性語法。
-
不要在一個MD文件內寫非常多的內容,應該根據實際情況將內容分割到多個檔案內,然後通過定義id屬性值和連結來進行跳轉。
Markdown編輯器
-
Sublime Text (win/linux/mac)官網
安裝
Markdown Preview
外掛後即可很好的支援Markdown檔案的編輯和預覽、轉換。特點:
- 語法高亮。
- 豐富的文字編輯功能。
- 自帶簡明語法手冊(Cheat sheet),能夠給新手快捷指引。
- 支援GitHub特性語法。
- 支援HTML的匯出和複製到剪貼簿功能。
- 支援常用的一些擴充套件(需要修改預設配置)。
- 支援HTML模板。
- 支援自定義樣式。
缺點:
- 不能匯出除CSS以外的純HTML標記程式碼段(需要手工複製)。
- Sublime Text 2/3在linux下的中文輸入存在問題(一個bug)。
- 不支援實時預覽,但可以先選擇在瀏覽器中預覽然後在文件修改後在瀏覽器中按F5重新整理頁面顯示的方法來實現類似實時預覽的功能。
-
reText(win/linux)官網
它是一個開源專業Markdown文件編輯器(同時也支援reStructuredText標記語言),一般在linux下使用。
特點:
- 語法高亮
- 支援GitHub特性語法。
- 生成的HTML文件中的樣式為外部樣式(即:使用)
- 支援匯出HTML、PDF和ODT格式檔案。
- 支援HTML模板。
- 支援自定義樣式。
- 支援實時預覽。
缺點:
- 在windows環境下難以安裝(需要手動安裝一大堆東西)。
- 不能匯出除CSS以外的純HTML標記程式碼段(需要手工複製)。
-
MarkdownPad(win)官網
是一款專業MD編輯器。
特點:
- 語法高亮。
- 支援GitHub特性語法。
- 支援匯出HTML和PDF檔案。
- 支援自定義樣式。
- 支援實時預覽。
- 離線支援GitHub風格MD標記
缺點:
- 商業軟體,沒有購買之前有功能限制。
- 沒有HTML模板定製功能。
-
haroopad(win/linux/mac)官網
韓國人開發的一款新一代MD編輯器,很有潛力的MD編輯器。
特點:
- 基於Chromium開發。
- 語法高亮。
- 支援GitHub特性語法。
- 生成的HTML文件中的樣式為外部樣式(即:使用)。
- 支援匯出除CSS以外的純HTML標記程式碼段。
- 具有簡潔的MD語法導航邊欄。
- 支援匯出HTML檔案。
- 支援將解析出的內容作為郵件傳送。
- 支援自定義樣式。
- 支援實時預覽。
- 支援編輯區與預覽區域的同步滾動。
- 支援語法檢測,在有問題的標記文字下面將顯示紅色波浪線。
- 支援VIM編輯模式。
- 與社交平臺整合。
缺點:
- 當前還處在Beta測試階段,功能不夠穩定。
- 沒有HTML模板定製功能。
附錄
Markdown解析器各大實現
-
引入更多標記特性和輸出選項的改進版Markdown解析器
-
基於Ruby的MD解析器
-
[markdown-js][011]
基於javascript(NodeJS)的MD解析器
-
命令列文件轉換神器!自帶MD解析器