最近更新: 2018年05月08日;
1. Markdown是什么
簡(jiǎn)單來講,Markdown就是一種標(biāo)記語言,簡(jiǎn)單方便。
最大的優(yōu)點(diǎn)是,在如今各種強(qiáng)大的文本編輯器橫飛的時(shí)代,Markdown返璞歸真,堅(jiān)持使用純文本編寫文檔,所見即所得。
由于它的純文本特點(diǎn),使得它幾乎能用所有的文本編輯器方便打開,另外還能方便的轉(zhuǎn)換為Html格式。
如今它不僅被程序員們使用著,而且也受到了廣大文字編輯愛好者的追捧。
Markdown 語法受到一些既有 text-to-HTML 格式的影響,包括 Setext、atx、Textile、reStructuredText、Grutatext和EtText,而最大靈感來源其實(shí)是純文本電子郵件的格式。
詳情請(qǐng)見維基百科——Markdown.
2. 為什么選擇使用Markdown
選擇總是需要理由。我們選擇使用Markdown,自然是它有足夠吸引人的好處。
顯而易見的幾條列舉如下:
純文本,所以兼容性極強(qiáng),可以用所有文本編輯器打開。
格式轉(zhuǎn)換方便,Markdown 的文本你可以輕松轉(zhuǎn)換為 html、電子書等。
Markdown 的標(biāo)記語法有極好的可讀性。
讓你專注于文字而不是排版。
不限于以上幾點(diǎn),更多待你體會(huì)。
3. 使用什么工具學(xué)習(xí)
由于Markdown的“所見即所得”的特性,如果你能選用一種所見即所得的文本編輯器,即有預(yù)覽的文本編輯器去編寫,上手起來簡(jiǎn)直飛快。
推薦兩種,個(gè)人使用過的如下:
- Cmd(在線 Markdown編輯閱讀器),需要登錄,不過注冊(cè)簡(jiǎn)單。
- 簡(jiǎn)書的自帶Markdown編輯器,也需要登錄,注冊(cè)也很簡(jiǎn)單。
4. 開始學(xué)Markdown
-
4.1 Markdown的基本符號(hào)
- Markdown符號(hào):*,-,+.三個(gè)符號(hào)是等效的,任選一個(gè)習(xí)慣使用的即可。
- 空白行,表示另起一個(gè)段落。
- 區(qū)塊引用符號(hào):> ; 行內(nèi)引用符號(hào):`.
-
4.2 文本樣式
- 標(biāo)題
標(biāo)題樣式共有六種,對(duì)應(yīng)于html中的h1~h6,對(duì)應(yīng)的符號(hào)是#~######,將其作為對(duì)應(yīng)大小標(biāo)題的前綴即可。
示例代碼編輯如下:
# 標(biāo)題h1
## 標(biāo)題h2
### 標(biāo)題h3
#### 標(biāo)題h4
##### 標(biāo)題h5
###### 標(biāo)題h6
文本中顯示效果如下:
標(biāo)題h1
標(biāo)題h2
標(biāo)題h3
標(biāo)題h4
標(biāo)題h5
標(biāo)題h6
- 強(qiáng)調(diào)
使用符號(hào)*與底線(_),選一個(gè)習(xí)慣喜歡的即可。被 一個(gè)* 或 _ 包圍的字詞會(huì)有斜體效果,用兩個(gè)* 或 _ 包起來的話,則會(huì)加粗。
示例代碼編輯如下:
*此處為斜體*
**此處加粗**
***此處為斜體且加粗***
_此處為斜體_
__此處加粗__
___此處為斜體且加粗___
文本中顯示效果如下:
此處為斜體
此處加粗
此處為斜體且加粗此處為斜體
此處加粗
此處為斜體且加粗
-
4.3 段落
一個(gè) Markdown 段落是由一個(gè)或多個(gè)連續(xù)的文本行組成,它的前后要有一個(gè)以上的空行(空行的定義是顯示上看起來像是空的,便會(huì)被視為空行。比方說,若某一行只包含空格和制表符,則該行也會(huì)被視為空行)。普通段落不該用空格或制表符來縮進(jìn)。
示例代碼編輯如下:
這是第一段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。
這是第二段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。
---------------------上邊沒有隔空行,下邊有------------------------
這是第一段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。
這是第二段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。
文本中顯示效果如下:
這是第一段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。
這是第二段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。---------------------上邊沒有隔空行,下邊有----------------------
這是第一段:任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。這是第二段,任何美的藝術(shù)品都不可能沒有一點(diǎn)瑕疵,但真正的美卻一定能夠掩蓋這些瑕疵。
不過值得注意的是,有的編輯器比較智能,編輯時(shí)直接換行也行,不過Markdown的語法要求如上。
另外,由于Markdown中的段落定義是由一個(gè)或多個(gè)連續(xù)的文本組成,中間的多個(gè)空格和tab會(huì)被認(rèn)為是一個(gè)空格。但是有時(shí)候確實(shí)需要這樣的空格或tab縮進(jìn)格式時(shí)怎么辦?
方法如下:在需要的地方插入
- 半方大的空白:
 或  - 全方大的空白:
 或  - 不斷行的空白格:
或 
最后如果希望強(qiáng)制換行,可以在行尾插入 2 個(gè)以上的空格實(shí)現(xiàn)。
-
4.4 列表
Markdown 支持有序列表和無序列表??梢灾С智短?。
無序列表使用*、-或是+作為列表標(biāo)記,注意:符號(hào)與文本之間要有空格。
-
無序列表:
示例代碼編輯如下:
* 無序列表文本一
* 無序列表文本二
* 無序列表文本三
或者:
- 無序列表文本一
- 無序列表文本二
- 無序列表文本三
亦或:
+ 無序列表文本一
+ 無序列表文本二
+ 無序列表文本三
文本效果都為:
- 無序列表文本一
- 無序列表文本二
- 無序列表文本三
-
有序列表:
使用數(shù)字+英文點(diǎn)+空格表示。
示例代碼編輯如下:
1. 有序列表文本一
2. 有序列表文本二
3. 有序列表文本三
文本顯示效果如下:
- 有序列表文本一
- 有序列表文本二
- 有序列表文本三
關(guān)于嵌套, 相鄰列表不隔空行,代表嵌套。
-
4.5 引用
區(qū)塊引用符號(hào):>; 行內(nèi)引用符號(hào):`;代碼區(qū)塊引用見下。
- 區(qū)塊引用
允許嵌套,區(qū)塊引用內(nèi)部仍遵循Markdown語法。
示例代碼編輯如下:
有一句關(guān)于人生的格言引述如下:
>人生就是不斷的戰(zhàn)斗,唯有死亡方得片刻的安寧
文本顯示效果如下:
有一句關(guān)于人生的格言引述如下:
人生就是不斷的戰(zhàn)斗,唯有死亡方得片刻的安寧
由于本身本篇文章的敘述即是使用區(qū)塊引用,于是總體上顯示出了嵌套的效果,因此嵌套也就不再贅述了,連續(xù)使用>符號(hào)即可。
- 行內(nèi)引用
示例代碼編輯如下:
人不可有`傲氣`,但不可無`傲骨`?!毂?
文本顯示效果如下:
人不可有
傲氣,但不可無傲骨?!毂?/p>
- 代碼區(qū)塊
和程序相關(guān)的寫作或是標(biāo)簽語言原始碼通常會(huì)有已經(jīng)排版好的代碼區(qū)塊,通常這些區(qū)塊我們并不希望它以一般段落文件的方式去排版,而是照原來的樣子顯示。
要在 Markdown 中建立代碼區(qū)塊很簡(jiǎn)單,只要簡(jiǎn)單地隔空行,然后縮進(jìn) 4 個(gè)空格或是 1 個(gè)制表符就可以。
示例代碼編輯如下:
我們有一段javascript代碼引用如下:
if (args.length && rUrl.test(args[0])){
thumbnail = args.shift();
}
文本顯示效果如下:
我們有一段javascript代碼引用如下:
if (args.length && rUrl.test(args[0])){ thumbnail = args.shift(); }
-
4.6 水平分割線
要生成水平分割線,可以在單獨(dú)一行里輸入3個(gè)或以上的短橫線、星號(hào)或者下劃線實(shí)現(xiàn)。短橫線和星號(hào)之間可以輸入任意空格。
示例代碼編輯如下:
* * *
***
*****
- - -
---------------------------------------
文本顯示效果如下:
-
4.7 鏈接
Markdown 支持兩種形式的鏈接語法: 行內(nèi)式和參考式兩種形式。
不管是哪一種,鏈接文字都是用 [方括號(hào)] 來標(biāo)記。
-
超鏈接
內(nèi)聯(lián)方式:This is an [example link](http://example.com/).引用方式:
I get 10 times more traffic from [Google][1] than from [Yahoo][2] or [MSN][3]. [1]: http://google.com/ "Google" [2]: http://search.yahoo.com/ "Yahoo Search" [3]: http://search.msn.com/ "MSN Search" -
圖片鏈接
圖片的處理方式和鏈接的處理方式,非常的類似,使用![]()符號(hào)內(nèi)聯(lián)方式:
![alt text]\(/path/to/img.jpg "Title") 注:書寫時(shí)去除'![]\()'中間的轉(zhuǎn)義符號(hào)'\'引用方式:
![alt text][id] [id]: /path/to/img.jpg "Title" -
其它鏈接
Markdown 支持比較簡(jiǎn)短的自動(dòng)鏈接形式來處理網(wǎng)址和電子郵件信箱,只要是用方括號(hào)包起來, Markdown 就會(huì)自動(dòng)把它轉(zhuǎn)成鏈接,鏈接的文字就和鏈接位置一樣,例如:<http://example.com/>
-
4.8 表格
相關(guān)代碼:
|項(xiàng)A | 項(xiàng)B | 項(xiàng)C | | ------------- |:-------------:| -----:| | aaa | aaaa | aaaaa | | aaaaaaaa | aaaaaaaa | aaaa | | aaaaaaaaaaaaa | aaaaaaaaa | a |文本顯示效果如下:
項(xiàng)A 項(xiàng)B 項(xiàng)C aaa aaaa aaaaa aaaaaaaa aaaaaaaa aaaa aaaaaaaaaaaaa aaaaaaaaa a -
4.9 轉(zhuǎn)義字符
Markdown 可以利用反斜杠來插入一些在語法中有其它意義的符號(hào)。
Markdown 支持在下面這些符號(hào)前面加上反斜杠來幫助插入普通的符號(hào):
\ 反斜杠
` 反引號(hào)
* 星號(hào)
_ 底線
{} 大括號(hào)
[] 方括號(hào)
() 括號(hào)
# 井字號(hào)
+ 加號(hào)
- 減號(hào)
. 英文句點(diǎn)
! 驚嘆號(hào)
5. 參考文檔
- Markdown 語法說明 (簡(jiǎn)體中文版)
- Markdown語法說明(詳解版)
- 獻(xiàn)給寫作者的 Markdown 新手指南
- 魯塔弗的博客
- Markdown 11種基本語法
- Markdown 語法
- 開始使用 Markdown
- Markdown
6. 其他
- Markdown與html是可以嵌套的。Markdown內(nèi)部可以嵌套大部分html代碼(有少數(shù)不支持);html中則不能嵌套Markdown標(biāo)記語言,不支持。
7. 修訂補(bǔ)充
-
2018/03/20 插入圖片(圖片編碼方法)
本節(jié)引用鏈接地址:MarkDown添加圖片的三種方式
1. 把圖片存入markdown文件
用base64轉(zhuǎn)碼工具把圖片轉(zhuǎn)成一段字符串,然后把字符串填到基礎(chǔ)格式中鏈接的那個(gè)位置。
-
基礎(chǔ)用法:
![avatar]\(data:image/png;base64,iVBORw0......) 注:書寫時(shí)去除'![]\()'中間的轉(zhuǎn)義符號(hào)'\'
這個(gè)時(shí)候會(huì)發(fā)現(xiàn)插入的這一長(zhǎng)串字符串會(huì)把整個(gè)文章分割開,非常影響編寫文章時(shí)的體驗(yàn)。如果能夠把大段的base64字符串放在文章末尾,然后在文章中通過一個(gè)id來調(diào)用,文章就不會(huì)被分割的這么亂了。
-
高級(jí)用法:
![avatar][base64str] [base64str]:data:image/png;base64,iVBORw0......
2. base64的圖片編碼如何得來?
-
使用python將圖片轉(zhuǎn)化為base64字符串
import base64 f=open('723.png','rb') #二進(jìn)制方式打開圖文件 ls_f=base64.b64encode(f.read()) #讀取文件內(nèi)容,轉(zhuǎn)換為base64編碼 f.close() print(ls_f) -
base64字符串轉(zhuǎn)化為圖片
import base64 bs='iVBORw0KGgoAAAANSUhEUg....' # 太長(zhǎng)了省略 imgdata=base64.b64decode(bs) file=open('2.jpg','wb') file.write(imgdata) file.close()
-
2018/03/20 簡(jiǎn)書Markdown編輯器下插入圖片
本節(jié)引用鏈接地址:如何插入圖片
簡(jiǎn)書Markdown非常方便地支持拖動(dòng)圖片上傳,將圖片拖動(dòng)入輸入框即可。
如果你需要添加的是本地圖片,可以直接拖動(dòng)一張或多張(200張以內(nèi))到編輯器內(nèi),圖片會(huì)自動(dòng)上傳。
如果你需要添加的是截圖,你可以使用 QQ 等軟件的自帶截圖功能截圖之后,在編輯器內(nèi)按「ctrl + V」組合鍵粘貼,即可自動(dòng)上傳截圖。
-
2018/05/03 代碼引用
示例代碼編輯如下:
``` bash
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
# run unit tests
npm run unit
```
顯示效果為:
# build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit
---end