Markdown是一個(gè)輕量級(jí)的文本標(biāo)記語(yǔ)言，通過(guò)簡(jiǎn)單直觀的語(yǔ)法，追求編輯時(shí)的酣暢淋漓和閱讀時(shí)的美觀大方。MD設(shè)計(jì)的初衷主要為以下三點(diǎn):
- 純文本的文件易于保存和傳輸，跨平臺(tái)支持好;
- 通過(guò)一些有意義的標(biāo)記，使得純文本的閱讀也直觀明了，如
**表示著重、加粗; - 通過(guò)簡(jiǎn)單的語(yǔ)法標(biāo)記來(lái)輸出美觀的排版和樣式。
MD最近越來(lái)越流行，對(duì)于程序員群體，更是近乎“標(biāo)配”。對(duì)于排版樣式要求不高的場(chǎng)景，配合合適的軟件，MD用起來(lái)的確比平時(shí)的富文本要來(lái)的酸爽！
很多人剛開(kāi)始認(rèn)識(shí)MD的時(shí)候，第一感覺(jué)估計(jì)是:寫(xiě)個(gè)文檔都這么折騰，還需要記啥語(yǔ)法，我小白一個(gè)可不大懂。好不容易鼓起勇氣嘗試，卻可能因?yàn)镸D的一些坑坑洼洼而不斷受挫。
本人重度使用MD已經(jīng)有四五年了，在這方面嘗試了很多，也總結(jié)了自己的一些經(jīng)驗(yàn)。本文將會(huì)分享一些MD方面的小知識(shí)和使用經(jīng)驗(yàn)，希望能幫助大家。其中錯(cuò)漏欠缺之處，也懇請(qǐng)大家不吝斧正，互相交流。
語(yǔ)法
MD剛出來(lái)的時(shí)候，其實(shí)是作為一個(gè)實(shí)現(xiàn)上的標(biāo)準(zhǔn)，而不是一個(gè)文檔的標(biāo)準(zhǔn)。因此，和其他語(yǔ)言不一樣，MD其實(shí)是沒(méi)有一個(gè)語(yǔ)法標(biāo)準(zhǔn)的。這是因?yàn)镸D是由一個(gè)程序員想出來(lái)的，然后程序員說(shuō)搞就搞，三兩下就實(shí)現(xiàn)了一個(gè)將MD轉(zhuǎn)為HTML排版的渲染引擎，然后告訴大家這就是MD。
后面大家覺(jué)得這樣的確方便，所以也自己實(shí)現(xiàn)了一個(gè)引擎。這些不同的實(shí)現(xiàn)，雖然大體都差不多，但某些細(xì)小的地方就有各個(gè)作者的不同考慮。
目前，MD語(yǔ)法還是沒(méi)有一個(gè)統(tǒng)一的標(biāo)準(zhǔn)，但是有一些比較流行的實(shí)現(xiàn)標(biāo)準(zhǔn)，如GFM和CommonMark。有人專門(mén)弄了一個(gè)在線網(wǎng)站展示各種流行渲染引擎的效果；不過(guò)網(wǎng)址一時(shí)忘了，只能有緣再見(jiàn)啦～
所以，不同的編輯器可能使用不同的渲染引擎來(lái)將MD文檔進(jìn)行渲染排版，從而可能會(huì)有不同的效果。這是MD很多坑的源頭。使用的時(shí)候，大家要留意。
軟件
支持MD的軟件很多，這里大概分為兩類吧:
- 編輯器
- 筆記軟件
其中，流行的MD編輯器目前有很多。顧名思義，該類軟件大概就是一個(gè)對(duì)MD語(yǔ)法有一些額外支持的文本編輯器。也可以進(jìn)一步細(xì)分為離線和在線兩種。比較流行的如MarkdownPad, StackEdit, CMD作業(yè)部落等等，這里就不一一貼鏈接了，有興趣的自行搜索一下也就“手到擒來(lái)”了。另外，也有部分程序員覺(jué)得應(yīng)該將寫(xiě)代碼和寫(xiě)筆記兩項(xiàng)運(yùn)動(dòng)結(jié)合在一起做，于是使用一些代碼編輯器來(lái)編輯MD筆記，如Vim, SublimeText, Atom等等。如果對(duì)這方面感興趣，可以參考Vim與Markdown，實(shí)現(xiàn)鍵不離手這篇文章。
MD編輯器雖然能夠提供足夠溜的編輯體驗(yàn)，但是筆記管理之類的功能則稍微雞肋，一旦筆記多了以后，往往就容易讓人懷念一個(gè)普通的筆記軟件了。筆記軟件當(dāng)然也有支持MD的啦，如有道云筆記、為知筆記等等。一般這些軟件都會(huì)提供編輯和閱讀兩種模式，編輯的時(shí)候是純文本，閱讀的時(shí)候則展示渲染后的效果。這樣，既有全面的筆記管理功能，也支持MD渲染。到此，好像一切都完美了。然而，很多筆記軟件提供的編輯體驗(yàn)卻是遠(yuǎn)遠(yuǎn)落后于一些MD編輯器軟件的。
那么，問(wèn)題來(lái)了，有沒(méi)有提供一級(jí)棒的MD編輯體驗(yàn)的筆記軟件呢？還真的有：
震驚！最舒適的Markdown筆記軟件竟是它
VNote: 一個(gè)舒適的Markdown筆記軟件
VNote目前支持三種渲染引擎：Hoedown, Marked和Markdown-it。后面將會(huì)使用VNote輔助講講MD的一些具體的坑。
相對(duì)于 所見(jiàn)即所得，MD天生就是編輯和閱讀兩個(gè)樣兒。目前大多數(shù)會(huì)采用兩種方式來(lái)處理這種與生俱來(lái)的割裂感：
- 不聞不問(wèn)
完全不管，類似于普通富文本編輯一樣進(jìn)行處理。 - 實(shí)時(shí)預(yù)覽
將屏幕一分為二，一邊編輯，一邊預(yù)覽渲染后的效果。這種方法有以下幾點(diǎn)不好：
- 眼珠子左右顧盼；
- 屏幕相對(duì)變窄了；
- 經(jīng)常需要分心將兩邊的內(nèi)容對(duì)照起來(lái)。
當(dāng)然，還有一種以Typora為代表的將MD實(shí)時(shí)渲染為富文本的做法。個(gè)人覺(jué)得，這種方法矯枉過(guò)正，和MD的設(shè)計(jì)理念背道而馳。
VNote采用相對(duì)折中的方案：
- 通過(guò)MD語(yǔ)法高亮幫助用戶在編輯時(shí)追蹤文章脈絡(luò)；
- 編輯時(shí)實(shí)時(shí)預(yù)覽圖片；
如下是寫(xiě)這篇文章的時(shí)候，簡(jiǎn)書(shū)編輯器的一個(gè)效果：
對(duì)應(yīng)在VNote中的效果：
標(biāo)題
標(biāo)題的語(yǔ)法就比較簡(jiǎn)單啦，多個(gè)#后面一個(gè)空格，然后是標(biāo)題的內(nèi)容。但是，當(dāng)標(biāo)題遇上下劃線，那么就有點(diǎn)小問(wèn)題了。
直接上圖說(shuō)明。
渲染前的文本如下：
# Simple Title
# Title with **Bold**
# Title with *Italic*
# Title with_Dash_
# Title with `code`
三個(gè)不同引擎渲染的效果分別如下：
可見(jiàn)，只有Markdown-it的下劃線是沒(méi)有被“吃”掉的。標(biāo)題中出現(xiàn)下劃線的場(chǎng)景還是很常見(jiàn)的，特別是對(duì)于程序員而言，比如某個(gè)函數(shù)名字。
列表
列表分為無(wú)序列表和有序列表。當(dāng)需要嵌套列表，或者在列表中插入代碼塊之類的時(shí)候，也是比較多坑的。
列表末尾空兩格換行
寫(xiě)列表的時(shí)候，我們往往很容易寫(xiě)出這樣的列表。
1. First
This is the first item in the list.
2. Second
This is the second item in the list.
渲染出來(lái)，感覺(jué)就不是那么回事了:
我們還需要在每個(gè)列表序號(hào)所在行后面添加至少兩個(gè)空格，告訴MD引擎“在這需要換行”：
這時(shí)候就差不多了：
嵌套列表縮進(jìn)四個(gè)空格
嵌套列表的寫(xiě)法如下：
1. First
2. Second
- Unordered list first
Description text in the nested list.
- Unordered list second
3. Third
渲染后的結(jié)果如下（注意第三行末尾有兩個(gè)空格哦）：
列表中插入圖片
如下：
1. First
2. Second
- Unordered list first
Description text in the nested list.
- Unordered list second
3. Third
注意第二幅圖片的縮進(jìn)，以及每幅圖片前的那一行的末尾兩個(gè)空格。
列表中插入代碼塊
這個(gè)就有點(diǎn)復(fù)雜了，我只能說(shuō)說(shuō)我自己的一個(gè)解決方法。
如下的MD文本：
注意代碼塊每一行都必須縮進(jìn)，而有些引擎要求代碼塊前必須空一行。渲染后如下：
一個(gè)錯(cuò)誤的例子：
渲染后，代碼塊會(huì)與列表處于同一個(gè)等級(jí)：
關(guān)于列表的其他
- 有序列表的序號(hào)其實(shí)并不重要，渲染后會(huì)自動(dòng)排序計(jì)數(shù)。
- 需要嵌套列表時(shí)，推薦多使用無(wú)序列表，只使用一次有序列表。因?yàn)椴煌瑢蛹?jí)的無(wú)序列表前面的符號(hào)標(biāo)記是不一樣的，而不同層級(jí)的有序列表都是使用簡(jiǎn)單的一個(gè)數(shù)字。
- 列表嵌套的層數(shù)不宜過(guò)多，否則遲早會(huì)癡線的。一般以3層為宜，如果需要更深層級(jí)的嵌套，可以考慮是否能把頂級(jí)的列表轉(zhuǎn)為標(biāo)題層級(jí)。
代碼
代碼比較簡(jiǎn)單，如下：
渲染后效果如下：
需要提出來(lái)的幾點(diǎn)：
- 兩種形式的代碼塊都是可以的，但是我覺(jué)得第一種比較方便；
- 第一種形式可以通過(guò)在
```之后指定高亮的語(yǔ)言，如cpp；而第二種形式也是可以指定語(yǔ)言的，但貌似比較麻煩；從渲染的效果來(lái)看，使用第二種形式時(shí)，VNote所用的引擎無(wú)法語(yǔ)法高亮。 - 第二種形式中，注意代碼塊最后最好換行，如紫色那一行所示。
- 編輯的時(shí)候，這兩種形式的表現(xiàn)不一樣是因?yàn)閂Note目前只支持第一種形式的代碼塊編輯時(shí)語(yǔ)法高亮。
- 對(duì)于 行內(nèi)代碼，如果需要輸入反引號(hào)，則可以使用兩個(gè)反引號(hào)作為標(biāo)記，如
`` ` ``；以此類推。
圖片
圖片就比較簡(jiǎn)單了。一般有兩種方式：
- 上傳圖片到網(wǎng)上（如圖床之類），獲取圖片的URL地址；
- 使用本地圖片，可以使用絕對(duì)路徑或相對(duì)于MD文件的相對(duì)路徑；
一個(gè)例子：
此時(shí)，該圖片是保存于與MD文件同一個(gè)目錄下的images/目錄下。注意，該圖片是直接從剪切板粘貼到VNote中，由VNote自動(dòng)插入的。VNote會(huì)幫用戶自動(dòng)保存圖片到相應(yīng)的一個(gè)目錄下，并提供編輯時(shí)實(shí)時(shí)預(yù)覽圖片。
表格
表格是MD的一個(gè)硬傷，因?yàn)樵贛D里面插入一個(gè)表格基本上等同于要求用戶手動(dòng)輸入表格邊框。
| Column 1 | Column 2 | Column 3 |
| --- | --- | --- |
| Data 1 containing \| | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
渲染如下：
注意以下幾點(diǎn)：
-
| --- | --- |一行可以添加:來(lái)表示對(duì)齊方式，如左對(duì)齊| :--- | :--- |； - 如果表格中需要出現(xiàn)
|，則 部分 渲染引擎允許通過(guò)\|轉(zhuǎn)義的方式來(lái)輸入|，如上圖所示；
其他
任務(wù)列表
部分引擎支持任務(wù)列表，如下：
- [ ] Undone;
- [x] Done;
- [x] Done;
大綱
部分引擎支持[TOC]語(yǔ)法顯示文章的大綱。當(dāng)然，VNote在編輯和閱讀的時(shí)候都支持一個(gè)更具交互性的大綱，所以[TOC]目前我比較少用。
流程圖和數(shù)學(xué)公式
部分引擎支持流程圖和數(shù)學(xué)公式。VNote通過(guò)Mermaid和MathJax來(lái)分別支持流程圖和數(shù)學(xué)公式。個(gè)人的意見(jiàn)是，公式可以有，流程圖很多時(shí)候就不必了。
渲染效果如下：
總結(jié)
以上就是一些個(gè)人在使用Markdown過(guò)程中的經(jīng)驗(yàn)，希望對(duì)你有幫助～～
珍愛(ài)生命，使用Markdown，多用空行
舒適生活，使用VNote，少些折騰
