Markdown常用語法

注:本文部分內(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. 有序列表二  
效果:
  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)寶石公主號七月一日的船票
效果:
  • [ ] 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")
效果:

我的GitHub
我的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)簽
例:
![喵星人](https://upload-images.jianshu.io/upload_images/2421826-b2e860959b39e4a1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 '小貓')
效果:
喵星人

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
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Markdown介紹 Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言,通過簡單的標(biāo)記語法,它可以使普通...
    liwuwuzhi閱讀 373評論 0 0
  • 1. 標(biāo)題設(shè)置 支持兩種標(biāo)題的設(shè)置形式: 1.1 用 # 標(biāo)記: 在 標(biāo)題開頭 加上 1~6 個 #,依次代表一到...
    椰汁小元寶閱讀 618評論 0 0
  • 1.初識markdown優(yōu)點: -純文本,所以兼容性極強(qiáng),可以用所有文本編輯器打開。-讓你專注于文字而不是排版。-...
    Yixi_Li閱讀 301評論 0 0
  • 標(biāo)題 一級標(biāo)題 二級標(biāo)題 三級標(biāo)題 四級標(biāo)題 五級標(biāo)題 六級標(biāo)題 列表 無序列表 列表 列表 Red Green ...
    陌上曦夏閱讀 1,034評論 0 1
  • Markdown是一種可以使用普通文本編輯器編寫的標(biāo)記語言,通過簡單的標(biāo)記語法,它可以使普通文本內(nèi)容具有一定的格式...
    大齡單身青年自救平臺閱讀 724評論 0 0

友情鏈接更多精彩內(nèi)容