Markdown 語法詳盡筆記大全 2019

目錄

•  0.介紹
•  1.快捷鍵
  • 寫法1 #
  • 寫法2 上下文標題
  •  2.2 字體設置斜體、粗體、刪除線 _*~
  •  2.3 分割線 --- 或 ***
  •  2.4 引用 >
    • 示例:
  •  2.5 列表
    • 無序列表 *，+，-
      • 示例
    • 有序列表
    • 列表的嵌套
      • 示例
    • 定義型列表
      • 示例
    • 列表的注意事項
  •  2.6 表格
    • 標准寫法
    • 簡約寫法
    • 特殊寫法
  •  2.7 超鏈接
    • 圖片鏈接 
      • 示例
    • 鏈接
      • 寫法1： <超鏈接>
      • 寫法2：[]()
      • 寫法3：HTML代碼
  •  2.8 代碼塊
    • 單行代碼
    • 代碼塊
    • 自定義語法
  •  3.2 字體、字號 與 顏色
    • CSDN-markdown編輯器
      • 示例
    • 背景色
      • 示例
  •  3.3 內嵌 HTML 語句
    • HTML 中的語義標簽
    • 格式化文本

    • 支持內嵌CSS樣式
  •  3.4 特殊字符
    • Markdown 中的語法符號
    • 其他特殊字符
  •  3.5 內容目錄 和 錨點
    • 內容目錄 [TOC]
    • 錨點
  •  3.6 emoji表情符號
    • 平台支持性
    • 示例

[Fuck me in Gitee](https://gitee.com/lin_river/NoteForMarkdown/blob/master/note%20for%20markdown.md) [Fuck me in Github]( https://github.com/lin-river/markdownNote/blob/master/markdown/markdown.md )

 0.介紹

  Markdown是一種可以使用普通文本編輯器編寫的標記語言，通過類似HTML的標記語法，它可以使普通文本內容具有一定的格式。

 1.快捷鍵

功能	快捷鍵
加粗	Ctrl + B
斜體	Ctrl + I
引用	Ctrl + Q
插入鏈接	Ctrl + L
插入代碼	Ctrl + K
插入圖片	Ctrl + G
提升標題	Ctrl + H
有序列表	Ctrl + O
無序列表	Ctrl + U
橫線	Ctrl + R
撤銷	Ctrl + Z
重做	Ctrl + Y

#

 2.基本語法

##

 2.1 分級標題 `#`

- 一般 `#` 作為文章大標題，只有一個，`###` 作為段落標題。

寫法1 #

# 一級標題  
## 二級標題  
### 三級標題  
#### 四級標題  
##### 五級標題  
###### 六級標題

寫法2 上下文標題

這是一個一級標題
============================

這是一個二級標題
----------------------------

注意：###### 六級標題 和 **文字** 效果是一樣的

 2.2 字體設置斜體、粗體、刪除線 _*~

代碼	顯示結果
正常文字	正常文字
*文字傾斜*	文字傾斜
_文字傾斜_	文字傾斜
**文字加粗**	文字加粗
***文字傾斜加粗***	文字傾斜加粗
~~文字下划線~~	文字下划線

注意不能有空格

 2.3 分割線 --- 或 ***

• 三個或者三個以上的 - 或者 * 都可以。

---
----
***
*****

 2.4 引用 >

• 在引用的文字前加>即可。引用也可以嵌套，如加兩個>>三個>>>

>這是引用的內容
>>這是引用的內容
>>>>>>>>>>這是引用的內容

示例:

這是引用的內容

這是引用的內容

這是引用的內容

 2.5 列表

無序列表 *，+，-

• 使用 *，+，- 表示無序列表。
  注意：符號后面一定要有一個空格，起到縮進的作用。

- 無序列表內容
+ 無序列表內容
* 無序列表內容

示例

• 無序列表內容

• 無序列表內容

• 無序列表內容

有序列表

• 使用數字和一個英文句點表示有序列表。
  注意：英文句點后面一定要有一個空格，起到縮進的作用。

1.有序列表內容 
2.有序列表內容
3.有序列表內容

列表的嵌套

• 上一級和下一級之間敲三個空格即可，或一個tab

- 列表的嵌套
    - 上一級和下一級之間敲三個空格即可

示例

• 列表的嵌套
  • 上一級和下一級之間敲三個空格即可

定義型列表

語法格式：

事物
:   事物的定義

Markdown 
:   輕量級文本標記語言，可以轉換成html，pdf等格式  //  開頭一個`:` + `Tab` 或 四個空格

代碼塊定義
:   代碼塊定義……

        var a = 10;         // 保持空一行與 遞進縮進

示例

Markdown

輕量級文本標記語言，可以轉換成html，pdf等格式 // 開頭一個: + Tab 或 四個空格

代碼塊定義

代碼塊定義……

  var a = 10;         // 保持空一行與 遞進縮進

列表的注意事項

• 列表中包含代碼塊
  • 前面加2個tab或者8個空格，並且需要空一行，否則不顯示
• 列表的轉義
  • 在使用列表時，只要是數字后面加上英文的點，就會無意間產生列表
  • 比如2017.12.30 這時候想表達的是日期，有些軟件把它被誤認為是列表。
  • 解決方式：在每個點前面加上\就可以了

 2.6 表格

表格對齊方式：
    冒號在左邊表示左對齊
    冒號右邊表示有對齊
    冒號兩邊都有表示居中

標准寫法

|    a    |       b       |      c     |
|:-------:|:------------- | ----------:|
|   居中  |     左對齊    |   右對齊   |
|=========|===============|============|

a	b	c
居中	左對齊	右對齊
=========	===============	============

簡約寫法

a  | b | c  
:-:|:- |-:
    居中    |     左對齊      |   右對齊    
============|=================|=============

a	b	c

居中    |     左對齊      |   右對齊    

|=|=========

特殊寫法

  對於合並單元格，以及其他特殊格式表格，markdown 是無能為力的
所以常規的做法是使用HTML標簽，但是這樣的編寫效率極低。
但是有了以下這款工具的話，所有問題都迎刃而解。
  在線生成HTML代碼 Tables Generator (國外的站)

<table class="tg">
  <tr>
    <th class="tg-0pky" rowspan="2">AAA</th>
    <th class="tg-0pky" colspan="2">BBB</th>
  </tr>
  <tr>
    <td class="tg-0pky"></td>
    <td class="tg-fymr" rowspan="2">CCC</td>
  </tr>
  <tr>
    <td class="tg-0pky" colspan="2">DDD</td>
  </tr>
</table>

AAA	BBB
		CCC
DDD

 2.7 超鏈接

!注意：
    {:target="_blank"} 跳轉方式兼容性一般 ，多數第三方平台不支持跳轉

圖片鏈接 ![描述](地址)

![圖片描述](圖片地址 '圖片title') 
    圖片title是圖片的標題，當鼠標移到圖片上時顯示的內容。
    圖片title可加可不加

示例

鏈接

寫法1：<超鏈接>

• 自動連接
  只要是用<>包起來，Markdown就會自動把它轉成鏈接。
  也可以直接寫，也是可以顯示成鏈接形式的

代碼	顯示結果
http://jianshu.com	http://jianshu.com
<http://baidu.com>	http://baidu.com

寫法2：[]()

[超鏈接名](超鏈接地址 "超鏈接title")
    title可加可不加

代碼	顯示結果
[簡書](http://jianshu.com)	簡書
[百度](http://baidu.com)	百度

寫法3：HTML代碼

<a href="超鏈接地址" target="_blank">超鏈接名</a>
注：  
    Markdown本身語法不支持鏈接在新頁面中打開   
    如果想要在新頁面中打開的話可以用html語言的a標簽代替。

超鏈接名

 2.8 代碼塊

單行代碼

• 代碼之間分別用一個反引號包起來
  代碼內容

代碼塊

• 代碼之間分別用三個反引號包起來，且兩邊的反引號單獨占一行

  代碼...
  代碼...
  代碼...

自定義語法

如 javascript，python，markdown...

print("hello world!")

#

 3.常用技巧

##

 3.1 換行與縮進

### 換行 `\
` ``` 方法1: 連續兩個以上空格+回車 方法2：使用html語言換行標簽：
``` ### 縮進字符 ``` 不斷行的空白格 半角的空格 全角的空格 ``` 或 ```   或   縮進 1/4 中文   或   縮進 1/2 中文，一個字符   或   縮進 1/1 中文，兩個字符 ``` #### 示例 Hello World  Hello World  Hello World  Hello World  Hello World  Hello World  Hello World

 3.2 字體、字號 與 顏色

• Markdown 本身是不支持修改字體、字號與顏色等功能的！

CSDN-markdown編輯器

是 Markdown 衍生版本，擴展了 Markdown 如表格、腳注、內嵌HTML等等的功能
接下來要講的功能就需要使用內嵌HTML的方法來實現。

face : 字體樣式
<font face= "華文彩雲">華文彩雲</font> 
  
color : 可以用十六位顏色值，也可以用已知顏色名
<font color="#f00">標紅字體</font> 

size : 規定文本尺寸大小,可能值從 1~7，瀏覽器默認值為 3
<font size="1">1號尺寸</font>

示例

微軟雅黑
華文彩雲
標紅字體
標紅字體
1號尺寸

背景色

Markdown 本身不支持背景色設置,需要采用內置html的方式實現
借助 table, tr, td 等表格標簽的 bgcolor 屬性來實現背景色的功能

    <table>
      <tr>
        <td bgcolor=orange>背景色是：orange</td>
      </tr>
    </table>

測試了支持度不夠良好,不建議使用 :)

示例

背景色是：orange

 3.3 內嵌 HTML 語句

HTML 中的語義標簽

描述	效果	代碼
斜體	斜體	<i>斜體</i>
加粗	加粗	<b>加粗</b>
強調	強調	<em>強調</em>
上標	Za	Z<sup>a</sup>
下標	Za	Z<sub>a</sub>
鍵盤文本	Ctrl	<kbd>Ctrl</kbd>

格式化文本 <pre></pre>

  保持輸入排版格式不變

<pre>
hello world 
         hi
  hello world 
</pre>

hello world 
         hi
  hello world 

支持內嵌CSS樣式

內聯樣式

 3.4 特殊字符

Markdown 中的語法符號

• 前面加反斜線\即可顯示符號本身。

代碼	顯示結果
反斜線 \\	\
星號 \*	*
井號 #	#
加號 +	+
減號 -	-
英文句號 .	.
英文驚嘆號 !	!
括號 \{\}\[\]\(\)	{}[]()

其他特殊字符

代碼	顯示結果
❤	❤
✓	✓
☀	☀
★	★
❄	❄
✓	☂
☢	☢
☎	☎
♫	♫
∞	∞

想知道字符對應的Unicode碼，可以看這個網站：https://unicode-table.com/cn/

 3.5 內容目錄 和 錨點

內容目錄 [TOC]

• 在段落中填寫 [TOC] 根據標題生成目錄，兼容性一般

錨點

• 錨點其實就是頁內超鏈接

插入錨點: {#標記名}
跳轉錨點: [描述](#index)

語法說明： 
在你准備跳轉到的指定標題后插入錨點{#標記}
然后在文檔的其它地方寫上連接到錨點的鏈接。

!注意：
    只有標題支持錨點， 跳轉目錄方括號后 保持空格
    測試了支持度不夠良好,不建議使用 :)

跳轉到目錄

 3.6 emoji表情符號

• emoji表情使用:EMOJICODE:的格式，詳細列表可見
  https://www.webpagefx.com/tools/emoji-cheat-sheet/
• 當然現在很多markdown工具或者網站都不支持。

平台支持性

工具或網站	是否支持emoji表情符號
簡書	否
MarkDownPad	否（不知道付費版是否支持）
有道雲筆記	否
zybuluo.com	否
github	是

示例

#

 4. 高端用法

##

 4.1 腳注 與 Latex數學公式

### 注腳 `[^注腳名]` ``` 引用腳注: [^注腳名] 添加腳注: [^注腳名]:

語法說明：
在需要添加注腳的文字后加上腳注名字[^注腳名字],稱為加注。
可在文本的任意位置添加腳注，腳注前必須有對應的腳注名字

注意：

• 腳注自動被搬運到最后面，請到文章末尾查看。
• 腳注后方的鏈接可以直接跳轉回到加注的地方。

我在這里要引用一個注腳[^0]

[^0]:我在這里對注腳進行添加注釋


### Latex數學公式 `\$`
#### 行內公式

$公式$

使用兩個”$”符號引用公式:

輸入 $\sqrt{x^{2}}$

#### 行間公式

$$公式$$
使用兩對“$$”符號引用公式：

輸入 $$\sqrt{x^{2}}$$

!注意:
測試了支持度不夠良好,不建議使用 😃

- 具體可以參考 [markdown編輯器使用LaTex數學公式](https://link.jianshu.com/?t=http%3A%2F%2Fblog.csdn.net%2Ftestcs_dn%2Farticle%2Fdetails%2F44229085)   
- latex數學符號詳見：[常用數學符號的 LaTeX 表示方法](https://www.mohu.org/info/symbols/symbols.htm)  


<br /><br />
##  <p style="background-color: lightgrey;border-radius:3px 4px 5px 6px;text-shadow:1px 1px 3px #000;color: white;padding: 2px;">&ensp;4.2 任務列表  </p>   
### 語法格式  

• [x] 選項一
• [ ] 選項二
• [ ] [選項3]

- [x] 選項一
- [ ] 選項二  
- [ ]  [選項三]

```
!注意：
    兼容性一般 要隔開一行
```


<br /><br />
##  <p style="background-color: lightgrey;border-radius:3px 4px 5px 6px;text-shadow:1px 1px 3px #000;color: white;padding: 2px;">&ensp;4.3 流程圖</p>   
### 語法格式：
```
代碼塊flow
代碼塊
```

```
flow                      // 流程
st=>start: 開始|past:> http://www.baidu.com // 開始，'st=>start: 開始'的：后面保持空格**
e=>end: 結束              // 結束
c1=>condition: 條件1:>http://www.baidu.com[_parent]   // 判斷條件
c2=>condition: 條件2      // 判斷條件
c3=>condition: 條件3      // 判斷條件
io=>inputoutput: 輸出     // 輸出
//----------------以上為定義參數-------------------------

//----------------以下為連接參數-------------------------
// 開始->判斷條件1為no->判斷條件2為no->判斷條件3為no->輸出->結束
st->c1(yes,right)->c2(yes,right)->c3(yes,right)->io->e
c1(no)->e                   // 條件1不滿足->結束
c2(no)->e                   // 條件2不滿足->結束
c3(no)->e                   // 條件3不滿足->結束
```

![](https://upload-images.jianshu.io/upload_images/6912209-972af6417eb7db1e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/635/format/webp "這只是個圖片")

### 定義參數  
  形參  | 實參  |       含義
:------:|:-----:|:---------------------:
tag     |st     |標簽 (可以自定義)
=>      |=>     |賦值
type    |start  |類型  (6種類型)
content |開始   |描述內容 (可以自定義)
:>url   |http://www.baidu.com[blank]|鏈接與跳轉方式 兼容性很差  


6種類型         |   含義
:--------------:|:----------:
start           |   啟動
end             |   結束
operation       |   程序
subroutine      |   子程序
condition       |   條件
inputoutput     |   輸出  

### 連接參數
形參	        |       實參	|   含義
:--------------:|:-------------:|:-----------:
->  	        |   ->	        |   連接
condition	    |   c1	        |   條件
(布爾值,方向)   |(yes,right)    |	如果滿足向右連接，4種方向：right ，left，up ，down 默認為：down

```
!注意：
    測試了支持度不夠良好,不建議使用 :)
```


<br /><br />
##  <p style="background-color: lightgrey;border-radius:3px 4px 5px 6px;text-shadow:1px 1px 3px #000;color: white;padding: 2px;">&ensp;4.4 時序圖</p>   
### 語法格式
```
代碼塊sequence
代碼塊
```

```sequence
A->>B: 你好                 // 'A->>B: 你好' 后面可以不寫文字，但是一定要在最后加上'：''
Note left of A: 我在左邊     // 注釋方向，只有左右，沒有上下
Note right of B: 我在右邊
B-->A: 很高興認識你
```

![](https://upload-images.jianshu.io/upload_images/6912209-784ce9bb7beb6672.png?imageMogr2/auto-orient/ "這只是圖片而已")  

   符號     |   含義    
:----------:|:----------:
    -	    |   實線
    >	    |   實心箭頭
    --	    |   虛線
    >>	    |   空心箭頭


<br /><br />
##  <p style="background-color: lightgrey;border-radius:3px 4px 5px 6px;text-shadow:1px 1px 3px #000;color: white;padding: 2px;">&ensp;4.5 甘特圖</p>   
### 語法格式
```
代碼塊gantt
代碼塊
```
```gantt
    title 項目開發流程
    section 項目確定
        需求分析       :a1, 2016-06-22, 3d
        可行性報告     :after a1, 5d
        概念驗證       : 5d
    section 項目實施
        概要設計      :2016-07-05  , 5d
        詳細設計      :2016-07-08, 10d
        編碼          :2016-07-15, 10d
        測試          :2016-07-22, 5d
    section 發布驗收
        發布: 2d
        驗收: 3d
```
![](//upload-images.jianshu.io/upload_images/33055-88d25f696dbcfb1f.jpeg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
更多語法參考：[甘特圖語法參考](https://mermaidjs.github.io/)



<br />
<br /><br />
# <p style="background-color: darkgrey;border-radius:3px 4px 5px 6px;text-shadow:1px 1px 3px #000;color: white;padding: 5px;">&ensp;5. Markdown工具</p>
- markdownpad軟件  
    - 利用markdown語言寫筆記的。官網下載地址：http://markdownpad.com/
- 有道雲筆記
    - 支持markdownpad語法 官方網址：http://note.youdao.com/
- markdown 在線編寫
    - [作業部落](https://www.zybuluo.com/mdeditor)  



<br />
<br /><br />
# <p style="background-color: darkgrey;border-radius:3px 4px 5px 6px;text-shadow:1px 1px 3px #000;color: white;padding: 5px;">&ensp;本文參考文章 </p>
- [Markdown 簡明教程](https://ouweiya.gitbooks.io/markdown/index.html) 
- [Markdown語法圖文全面詳解(10分鍾學會)](https://blog.csdn.net/u014061630/article/details/81359144#27-%E5%88%97%E8%A1%A8 )  
- [Markdown 語法整理大集合2017](https://www.jianshu.com/p/b03a8d7b1719)