注:本文部分內(nèi)容由于簡書不支持不能完全顯示,請移步https://www.zybuluo.com/code009/note/1465644
{#頂部}
Markdown簡述
Markdown是一種純文本格式的標(biāo)記語言。通過簡單的標(biāo)記語法,它可以使普通文本內(nèi)容具有一定的格式。非常適合于寫文檔、博客和筆記。
Markdown優(yōu)缺點分析
Markdown優(yōu)點:
- 純文本內(nèi)容,兼容所有的文本編輯器與字處理軟件
- 格式轉(zhuǎn)換方便,輕松的導(dǎo)出 HTML、PDF 和本身的 .md 文件
- 可讀、直觀、學(xué)習(xí)成本低
- 專注你的文字內(nèi)容而不是排版樣式,安心寫作
- 支持 HTML 標(biāo)簽
Markdown缺點:
- 沒有像word一樣格式的花哨
- 不支持復(fù)雜的格式
- 有太多不兼容的方言。由于原始的Markdown支持的格式有限,所以出現(xiàn)了很多不同的擴(kuò)展,這些擴(kuò)展之間的不兼容性是一個問題
- markdown沒有被標(biāo)準(zhǔn)化,其版本較多,給人感覺有點混亂,因為github的關(guān)系,當(dāng)前比較流行的是markdown是gfm
1. 分級標(biāo)題
1.1 形式一(類 Atx )
在行首插入1到6個#,對應(yīng)1到6階標(biāo)題。
例:
# 一級標(biāo)題
## 二級標(biāo)題
### 三級標(biāo)題
#### 四級標(biāo)題
##### 五級標(biāo)題
###### 六級標(biāo)題
效果:
一級標(biāo)題
二級標(biāo)題
三級標(biāo)題
四級標(biāo)題
五級標(biāo)題
六級標(biāo)題
1.2 形式二(類 Setext )
在文字下添加=表示最高階標(biāo)題,添加-表示第二階標(biāo)題。
例:
大標(biāo)題
=====
小標(biāo)題
----
效果:
大標(biāo)題
小標(biāo)題
2. 分割線(不同類型的編輯器顯示分割線的效果可能不同)
在一行中用三個以上的 *、-、_ 來建立一個分隔線,行內(nèi)不能有其他東西。也可以在星號或是減號中間插入空格。
例:
***
---
_ _ _
效果:
3. 列表
3.1 無序列表
在文字前加 *、-或+
例:
* 無序列表一
* 無序列表二
或
+ 無序列表一
+ 無序列表二
或
- 無序列表一
- 無序列表二
效果:
- 無序列表一
- 無序列表二
3.2 有序列表
在文字前面加上1. 2. 3.。(序號和文本中間要有空格)
例:
1. 有序列表一
2. 有序列表二
效果:
- 有序列表一
- 有序列表二
3.3 列表嵌套
列表內(nèi)部使用列表。
例:
- 外部列表項一
- 內(nèi)部列表項一
- 內(nèi)部列表項二
- 外部列表項二
效果:
- 外部列表項一
- 內(nèi)部列表項一
- 內(nèi)部列表項二
- 外部列表項二
3.4 待辦事宜TODO列表
使用帶有 [ ] 或 [x] (未完成或已完成)項的列表語法撰寫一個待辦事宜列表,并且支持子列表嵌套以及混用Markdown語法。
例:
- [ ] **Cmd Markdown 開發(fā)**
- [ ] 改進(jìn) Cmd 渲染算法,使用局部渲染技術(shù)提高渲染效率
- [ ] 支持以 PDF 格式導(dǎo)出文稿
- [x] 新增Todo列表功能
- [x] 改進(jìn) LaTex 功能
- [x] 修復(fù) LaTex 公式渲染問題
- [x] 新增 LaTex 公式編號功能
- [ ] **七月旅行準(zhǔn)備**
- [ ] 準(zhǔn)備郵輪上需要攜帶的物品
- [ ] 瀏覽日本免稅店的物品
- [x] 購買藍(lán)寶石公主號七月一日的船票
效果:
4. 插入超鏈接
4.1 行內(nèi)式
語法:[顯示文本](鏈接地址 "title")
title 可選,設(shè)置以后,鼠標(biāo)懸停在超鏈接上會顯示該title。
例:
[我的GitHub](https://github.com/MrChenYoung)
[我的GitHub](https://github.com/MrChenYoung "我的GitHub")
效果:
4.2 參考式
參考式可以在一個地方統(tǒng)一管理鏈接,如果一個鏈接在文章中多次使用,使用這種方式起到鏈接復(fù)用的功能。
語法: [鏈接文字][鏈接標(biāo)記]
在文章的任意位置添加 [鏈接標(biāo)記]:鏈接地址 "鏈接標(biāo)題",如果鏈接文字可以作為鏈接標(biāo)記,可以簡寫為[鏈接文字][]
例:
[我的GitHub][1]
或
[GitHub主頁][]
效果:
[我的GitHub][2]
或
[GitHub主頁][]
4.3 自動鏈接
自動鏈接是一種簡便的處理網(wǎng)址或郵箱的方式,用<>把網(wǎng)址或郵箱包起來就會自動轉(zhuǎn)換成鏈接。顯示的鏈接文字和鏈接地址一樣。
語法: <鏈接地址>
例:
<https://github.com/MrChenYoung>效果: https://github.com/MrChenYoung
5. 錨點(在Markdown預(yù)覽頁無效,文章發(fā)布以后在網(wǎng)頁上才有效)
錨點是實現(xiàn)文章內(nèi)部跳轉(zhuǎn)的鏈接。
語法: 首先在要跳轉(zhuǎn)到的位置設(shè)置錨點: {#標(biāo)記名},然后再點擊跳轉(zhuǎn)的地方設(shè)置跳轉(zhuǎn)的地方: [顯示跳轉(zhuǎn)文字](#標(biāo)記名)
例:
回到[頂部](#頂部)效果: 回到頂部
6. 插入圖片
6.1 行內(nèi)式
語法:[圖片上傳失敗...(image-3c0aa4-1556539983652)]
圖片路徑可以是本地圖片路徑,也可以是網(wǎng)絡(luò)圖片路徑。Alt text 和 title 是可選的項;Alt text 表示圖片下面顯示的文字(部分編輯器不支持),title 和 HTML 中<img> 標(biāo)簽的 title 屬性相似, 表示鼠標(biāo)懸停在圖片上顯示的文字。
注: Markdown沒法設(shè)置圖片的大小,如果有需要可以使用 HTML 中的<img>標(biāo)簽
例:

效果:

6.2 參考式
語法: ![Alt text][標(biāo)記]
例:
![喵星人][3]效果:
![喵星人][4]
7. 文本引用
7.1 單層引用
在要引用的文字前加>,>和文本中間留空格。(簡便的寫法是只在段落的第一行添加>,引用內(nèi)部可以嵌套其他markdown語法)
例:
桃花庵歌
桃花塢里桃花庵,
桃花庵下桃花仙;
桃花仙人種桃樹,
又摘桃花賣酒錢。
酒醒只在花前坐,
酒醉還來花下眠;
半醒半醉日復(fù)日,
花落花開年復(fù)年。
但愿老死花酒間,
不愿鞠躬車馬前;
車塵馬足富者趣,
酒盞花枝貧者緣。
若將富貴比貧賤,
一在平地一在天;
若將貧賤比車馬,
他得驅(qū)馳我得閑。
別人笑我太瘋癲,
我笑他人看不穿;
不見五陵豪杰墓,
無花無酒鋤作田。
7.2 多層嵌套引用
不同層次添加不同數(shù)量的>實現(xiàn)引用的嵌套。
例:
> 第一層引用
>> 第二層引用
>>> 第三層引用
效果:
第一層引用
第二層引用
第三層引用
8. 代碼引用
8.1 行內(nèi)式
在要引用的代碼首尾添加 ` 符號,用于插入一句代碼。
例:
C語言里`scanf()`函數(shù)的用法
效果:
C語言里
scanf()函數(shù)的用法
8.2 用6個`包裹代碼
在要引用的代碼首行和末行添加```符號。
例:
```
for i in 1..<5 {
print("\(i)")
}
```
效果:
for i in 1..<5 {
print("(i)")
}
8.3 縮進(jìn)式多行代碼
在要引入的代碼前添加至少一個 Tab 或四個空格縮進(jìn)。
例:
for i in 1..<5 {
print("\(i)")
}
8.4 代碼高亮
語法:
```語言類型 代碼 ````
例:
```swift
for i in 1..< 5 {
print("\(i)")
}
```
效果:
for i in 1..< 5 {
print("\(i)")
}
8.5 HTML 原始碼
在代碼區(qū)塊里面, & 、 < 和 > 會自動轉(zhuǎn)成 HTML 實體,這樣的方式讓你非常容易使用 Markdown 插入范例用的 HTML 原始碼,只需要復(fù)制貼上,剩下的 Markdown 都會幫你處理。
例:
<div class="footer"> ? 2004 Foo Corporation</div>
和
<table>
<tr>
<th rowspan="2">值班人員</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
</tr>
<tr>
<td>李強(qiáng)</td>
<td>張明</td>
<td>王平</td>
</tr>
</table>
效果:
<div class="footer"> ? 2004 Foo Corporation</div>
和
<table> <tr> <th rowspan="2">值班人員</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> </tr> <tr> <td>李強(qiáng)</td> <td>張明</td> <td>王平</td> </tr></table>
9. 字體
9.1 字體加粗
在要加粗的文字前后加上 ** 或 __(兩個下劃線)
例:
**粗體文字**
或
__粗體文字__
效果:
粗體文字
或
粗體文字
9.2 斜體文字
在斜體文字前后加上 * 或 _(單個下劃線)
例:
*斜體文字*
或
_斜體文字_
效果:
斜體文字
或
斜體文字
9.3 斜體加粗文字
在文字前后加上 *** 或 ___(三個下劃線)
例:
***斜體加粗文字***
或
___斜體加粗文字___
效果:
斜體加粗文字
或
斜體加粗文字
9.4 加刪除線的文字(部分編輯器無效)
在文字的前后加上~~
例:
~~原價:198元~~
效果:
原價:198元
10. 注腳
語法: 首先在要加注的地方加注: 加注文字[^注腳名字] ,然后在文章任意地方(一般是文末)添加腳注:[^注腳名字]:解釋。
例:
Markdown[^1]可以高效的書寫文檔,轉(zhuǎn)換成HTML[^2]。
效果:
Markdown[1]可以高效的書寫文檔,轉(zhuǎn)換成HTML[2]。
11. 換行
Markdown中要實現(xiàn)換行,單獨一個回車是實現(xiàn)不了的,要首先輸入至少兩個空格,然后回車,就實現(xiàn)下一行和當(dāng)前行不在一行。
12. 表格
用|和-分割行列內(nèi)容,:表示對齊方式(默認(rèn)左對齊)。
例:
原生方式:
| Tables | Are | Cool |
| ------------- |:-------------:| -----:|
| col 3 is | right-aligned | $1600 |
| col 2 is | centered | $12 |
| zebra stripes | are neat | $1 |
簡單方式:
姓名 | 年齡 | 職業(yè)
-------:|:---------:|-----:
張三 | 18 | 律師
李四 | 20 |軟件工程師
效果:
Tables Are Cool col 3 is right-aligned $1600 col 2 is centered $12 zebra stripes are neat $1
主要人員姓名 年齡 職業(yè) 張三 18 律師 李四 20 軟件工程師
13. 特殊字符轉(zhuǎn)換成普通字符
在Markdown的特殊字符前加上反斜杠轉(zhuǎn)換成普通字符。
Markdown 支持以下這些符號前面加上反斜杠來幫助插入普通的符號:
| 符號 | 名稱 | 示例 | 效果 |
|---|---|---|---|
| \ | 反斜線 | \\ |
\ |
| ` | 反引號 | \` |
` |
| * | 星號 | \* |
* |
| _ | 底線 | \_ |
_ |
| {} | 花括號 | \{} |
{} |
| [] | 方括號 | \[] |
[] |
| () | 括號 | \() |
() |
| # | 井號 | \# |
# |
| + | 加號 | \+ |
+ |
| - | 減號 | \- |
- |
| . | 英文句號 | \. |
. |
| ! | 感嘆號 | \! |
! |
14. Markdown作圖(部分編輯器不支持)
14.1 繪制流程圖
將流程圖代碼包含在```folw和```之間。流程圖代碼分兩步,第一步創(chuàng)建元素,第二步連接元素,兩部之間用空行分割。流程圖元素后可以跟上鏈接,點擊元素跳轉(zhuǎn)。
流程圖元素
- 開始
st=>start: 開始 - 操作
op1=>operation: 操作、執(zhí)行說明 - 條件
cond=>condition: 確認(rèn)? - 子程序
sub1=>subroutine: 子程序操作說明 - 用戶輸入或輸出
io1=>inputoutput: 輸入輸出 - 結(jié)束
e=>end: 結(jié)束
例1:
```flow
st=>start: 開始:> https://www.github.com
e=>end: 登錄
io1=>inputoutput: 輸入用戶名密碼
sub1=>subroutine: 數(shù)據(jù)庫查詢子類
cond=>condition: 是否有此用戶
cond2=>condition: 密碼是否正確
op=>operation: 讀入用戶信息
>
st->io1->sub1->cond
cond(yes,right)->cond2
cond(no)->io1(right)
cond2(yes,right)->op->e
cond2(no)->io1
```
效果:
st=>start: 開始:> https://www.github.com
e=>end: 登錄
io1=>inputoutput: 輸入用戶名密碼
sub1=>subroutine: 數(shù)據(jù)庫查詢子類
cond=>condition: 是否有此用戶
cond2=>condition: 密碼是否正確
op=>operation: 讀入用戶信息
st->io1->sub1->cond
cond(yes,right)->cond2
cond(no)->io1(right)
cond2(yes,right)->op->e
cond2(no)->io1
例2:
```flow
st=>start: 開始
rain?=>condition: 今天有雨嗎?
takeAnUmbrella=>operation: 帶傘
go=>operation: 出門
e=>end: 結(jié)束
>
st->rain?
rain?(yes)->takeAnUmbrella->go
rain?(no)->go->e
```
效果:
st=>start: 開始
rain?=>condition: 今天有雨嗎?
takeAnUmbrella=>operation: 帶傘
go=>operation: 出門
e=>end: 結(jié)束
st->rain?
rain?(yes)->takeAnUmbrella->go
rain?(no)->go->e
14.2 繪制序列圖
序列圖代碼用```sequence和```包裹。
步驟:
- 設(shè)置title
- title:序列圖標(biāo)題
- 設(shè)置participant(參與者)
- participant:actor
- 設(shè)置Note
- Note left of A(左側(cè)note)
- Note right of A(右側(cè)note)
- Note over A(覆蓋A)
- Note over B,C(覆蓋多個actor)
- 設(shè)置會話(actor->actor:message、actor-->actor:message、actor->>actor:message、actor-->>actor:message)
- A->A:自言自語
- A->B:實線實箭頭
- A-->B:虛線實箭頭
- A->>B:實線虛箭頭
- A-->>B:虛線虛箭頭
例1:
```sequence
Title:作業(yè)通知提交序列圖
participant 教師
participant 班長
participant 同學(xué)們
教師-->班長:通知明天交作業(yè)
Note left of 教師:通知
班長-->同學(xué)們:記得明天交作業(yè)
同學(xué)們->班長:了解
同學(xué)們-->教師: 交作業(yè)
note right of 同學(xué)們:作業(yè)
```
效果:
Title:作業(yè)通知提交序列圖
participant 教師
participant 班長
participant 同學(xué)們
教師-->班長:通知明天交作業(yè)
Note left of 教師:通知
班長-->同學(xué)們:記得明天交作業(yè)
同學(xué)們->班長:了解
同學(xué)們-->教師: 交作業(yè)
note right of 同學(xué)們:作業(yè)
例2:
```sequence
participant 客戶端
participant 控制器
participant 業(yè)務(wù)
participant 數(shù)據(jù)庫
>
客戶端->控制器:提交店鋪數(shù)據(jù)
Note right of 客戶端:提交數(shù)據(jù)javascript進(jìn)行驗證
控制器->控制器:驗證數(shù)據(jù)完整性
Note left of 控制器:返回錯誤的字段信息
控制器-->客戶端:數(shù)據(jù)不完整
控制器->業(yè)務(wù):保存店鋪到數(shù)據(jù)庫
業(yè)務(wù)->業(yè)務(wù):save店鋪數(shù)據(jù)
業(yè)務(wù)-->控制器:保存出現(xiàn)異常
控制器-->客戶端:save異常,提示客戶端
業(yè)務(wù)->數(shù)據(jù)庫:保存成功
數(shù)據(jù)庫-->業(yè)務(wù):success
業(yè)務(wù)-->控制器:success
控制器-->客戶端:success 客戶端
Note left of 控制器:返回正確的提示,并跳轉(zhuǎn)到審核第二步
```
效果:
participant 客戶端
participant 控制器
participant 業(yè)務(wù)
participant 數(shù)據(jù)庫
客戶端->控制器:提交店鋪數(shù)據(jù)
Note right of 客戶端:提交數(shù)據(jù)javascript進(jìn)行驗證
控制器->控制器:驗證數(shù)據(jù)完整性
Note left of 控制器:返回錯誤的字段信息
控制器-->客戶端:數(shù)據(jù)不完整
控制器->業(yè)務(wù):保存店鋪到數(shù)據(jù)庫
業(yè)務(wù)->業(yè)務(wù):save店鋪數(shù)據(jù)
業(yè)務(wù)-->控制器:保存出現(xiàn)異常
控制器-->客戶端:save異常,提示客戶端
業(yè)務(wù)->數(shù)據(jù)庫:保存成功
數(shù)據(jù)庫-->業(yè)務(wù):success
業(yè)務(wù)-->控制器:success
控制器-->客戶端:success 客戶端
Note left of 控制器:返回正確的提示,并跳轉(zhuǎn)到審核第二步
#### 14.3 繪制甘特圖吃(部分編輯器不支持)
具體語法參考[甘特圖語法參考](https://mermaidjs.github.io/)
> ##### 例1:
```gantt
dateFormat YYYY-MM-DD
title 產(chǎn)品計劃表
section 初期階段
明確需求: 2017-03-01, 10d
section 中期階段
跟進(jìn)開發(fā): 2017-03-11, 9d
section 后期階段
抽查測試: 2017-03-20, 9d
```
> ##### 效果:
> ```gantt
dateFormat YYYY-MM-DD
title 產(chǎn)品計劃表
section 初期階段
明確需求: 2017-03-01, 10d
section 中期階段
跟進(jìn)開發(fā): 2017-03-11, 9d
section 后期階段
抽查測試: 2017-03-20, 9d
> ```
> ##### 例2:
```gantt
title 項目開發(fā)流程
section 項目確定
需求分析 :a1, 2016-06-22, 3d
可行性報告 :after a1, 5d
概念驗證 : 5d
section 項目實施
概要設(shè)計 :2016-07-05 , 5d
詳細(xì)設(shè)計 :2016-07-08, 10d
編碼 :2016-07-15, 10d
測試 :2016-07-22, 5d
section 發(fā)布驗收
發(fā)布: 2d
驗收: 3d
```
> ##### 效果:
>```gantt
title 項目開發(fā)流程
section 項目確定
需求分析 :a1, 2016-06-22, 3d
可行性報告 :after a1, 5d
概念驗證 : 5d
section 項目實施
概要設(shè)計 :2016-07-05 , 5d
詳細(xì)設(shè)計 :2016-07-08, 10d
編碼 :2016-07-15, 10d
測試 :2016-07-22, 5d
section 發(fā)布驗收
發(fā)布: 2d
驗收: 3d
>```
* * *
[GitHub主頁]:https://github.com
[^1]: Markdown是一種純文本標(biāo)記語言
[^2]: Hypertext Markup Language超文本標(biāo)記語言
[1]:https://github.com/MrChenYoung "GitHub地址"
[2]:https://github.com/MrChenYoung "GitHub地址"
[3]:https://upload-images.jianshu.io/upload_images/2421826-b2e860959b39e4a1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "小貓"
[4]:https://upload-images.jianshu.io/upload_images/2421826-b2e860959b39e4a1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 "小貓"
[5]: /Users/mrchen/Desktop/%E6%97%B6%E5%BA%8F%E5%9B%BE%E8%AF%AD%E6%B3%95.jpg