CSDN的markdown編輯器詳細使用說明、語法快速索引手冊

Markdown介紹

 Markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文本格式編寫文檔，然後轉換成格式豐富的HTML頁面。這幾年Markdown編輯器以其獨到的優勢迅速火起來了，很多寫作平臺都開始支持了。
 Markdown語法常用的也就十個左右，Markdown編輯器深受技術人員和效率寫手的喜愛，很多Markdown編輯器還可以輕鬆地將文本轉換爲pdf等格式。

快捷鍵

 助記：其中四個命令是Ctrl+字母（同office裏面一樣），其餘的都是Ctrl+shift+字母。

• 撤銷：Ctrl + Z（同office一樣）
• 重做：Ctrl + Y（同office一樣）
• 標題：Ctrl + Shift + H（標題的英文是headline，所以取字母H）
• 加粗：Ctrl + B（同office一樣）
• 插入鏈接：Ctrl + Shift + L（鏈接的英文是Link，所以取字母L）
• 插入代碼：Ctrl + Shift + K（本來可以用Code的字母C，但是C被人用了，K是Keyword的意思，因爲代碼語法高亮顯示，主要是顯示keyword）
• 插入圖片：Ctrl + Shift + G（圖形是Graphic，取字母G）
• 有序列表：Ctrl + Shift + O（有序的是Order，取字母O）
• 無序列表：Ctrl + Shift + U（無序的是Unordered，取字母U）
• 橫線：Ctrl + Shift + R（這個我也不知道爲什麼……）
• 斜體：Ctrl + I（同office一樣）
• 引用：Ctrl + Shift + Q（引用是Quote，取字母Q）

1、標題

 助記：#+空格，1個#號表示1級標題，6個#表示6級標題，#號越多字體越小。

# 標題1
## 標題2
### 標題3
#### 標題4
##### 標題5
###### 標題6

2、粗體/斜體/刪除線/字體底色

**粗體是每邊兩個星號**

粗體是每邊兩個星號

*斜體是每邊一個星號*

斜體是每邊一個星號

~~刪除線是每邊兩個波浪線~~

刪除線是每邊兩個波浪線

==字體底色是每邊兩個等號==

字體底色是每邊兩個等號

3、上標/下標

• 助記：上標每邊一個^符號

2^10^ 運算結果是 1024。

2¹⁰ 運算結果是 1024。

• 助記：下標每邊一個~符號

H~2~O 就是水。

H₂O 就是水。

4、無序排列

 助記：列表分爲三種無序列表、有序列表、待辦事項列表。
 無序列表是：-（減號）+空格，或：*+空格，或：+（加號）+空格，效果都是一樣的，樣式只有小黑點一種。

- 無序
* 無序
+ 無序

• 無序
• 無序
• 無序

5、有序排列

 助記：有序列表是：數字+.(英文句號)+空格，樣式只有數字一種。

1. 有序
2. 有序
3.	有序

1. 有序
2. 有序
3. 有序

6、待辦事項

 助記：計劃事項是：-（減號）+空格+[+空格+]+空格
 已完成事項：-（減號）+空格+[+字母x（大小寫都可以）+]+空格

- [ ] 計劃任務
- [x] 完成任務

• 計劃任務
• 完成任務

7、引用

 引用主要用於形成一個帶底色的方框，表示引用其他的文字或說明。
 助記：>(大於號)+空格

> 這裏是引用的文字

這裏是引用的文字

8、腳註

 腳註是對某一段話，某一個詞的備註說明，專業性表格或技術論文中經常使用。

• 助記(引用)：[^數字]

這是一段話[^1]
這是二段話[^2]

這是一段話¹
這是二段話²

• 助記：冒號[^數字]

[^1]:這是腳註1
[^2]:這是腳註2

腳註的內容可以寫在任何地方，但預覽或發佈時會自動顯示在頁面最底下，並在上面添加一個分割線。

9、自動註釋

 腳註是對某一段話，某一個詞的專有說明，而自動註釋可以對文中所有出現的某個詞進行說明，並以鼠標提示的方式進行說明。
 助記：被說明的詞前後空格或跟着標點符號，
 註釋內容：*[某個詞]:要提示的說明文字

Markdown兼容標準的 HTML 語法。
*[HTML]:一種超文本標記語言、

Markdown兼容標準的 HTML 語法。

10、鏈接

 助記：常用鏈接有三種，地址鏈接，文字鏈接，圖片鏈接(參見下文單獨的說明)

 a) 地址鏈接

 助記：<http開頭的地址>

<https://www.baidu.com>

https://www.baidu.com

 b) 文字鏈接

 助記：[文字內容](http開頭的地址)

[百度](https://www.baidu.com/)

百度

11、圖片鏈接

 a) 一般圖片

 助記：

![圖片提示性文字，可不(圖片地址)圖片地址)]
在一般文字鏈接前面多了一個歎號！

例如：
![頭像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg)
顯示如下的頭像圖標：

 b) 帶尺寸圖片

 助記：

![圖片提示性文字，可不寫](圖片地址 =尺寸)，=號前面有空格
在末尾多了一個 =號

例如：
![頭像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg =130x130)
顯示如下的頭像圖標：

 c) 圖片居中

 助記：

![圖片提示性文字，可不寫](圖片地址#pic_center)，#號前面不能有空格

例如：
![頭像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg#pic_center)
顯示如下的頭像圖標：

 d) 圖片居中且帶尺寸

 助記：將上述兩者結合即可

例如：
![頭像](https://avatar.csdn.net/1/F/F/3_davidhzq.jpg#pic_center =130x130)
顯示如下的頭像圖標：

12、參考式鏈接

 CSDN目前不支持這種鏈接，它用的也比較少，使用上有點類似於腳註。腳註是給某段文字加文字性說明，參考式鏈接是給某段文字加鏈接。類似於HTML中的文章內部 錨和命名。

13、表格

 表格的語法格式如下：豎線表示表格每一列，橫線以上是表頭，其餘表格線系統自動添加。

項目    	| 價格
-------	| ---
電腦		| ￥5600
電話 	| ￥3500
PAD    	| ￥2000

項目	價格
電腦	￥5600
電話	￥3500
PAD	￥2000

可以使用冒號來定義對齊方式：

使用 :---------: 居中（或者沒有:號，默認也是居中）
使用 :----------居左
使用----------: 居右

項目    	| 價格
:-------	| :---
電腦		| ￥5600
電話 	| ￥3500
PAD    	| ￥2000

項目	價格
電腦	￥5600
電話	￥3500
PAD	￥2000

14、代碼塊

 助記：```開始，```結束，中間是代碼，`是鍵盤數字1前面那個按鍵，開始標記後面可插入編程語言的名字，CSDN支持常見的十幾多種編程語言，如圖：

　```javascript
　//代碼高亮顯示例子
　var aa= 'this';
　var bb= 'that';
　let cc= aa+ bb;
　```

效果如下：

//代碼高亮顯示例子
var aa= 'this';
var bb= 'that';
let cc= aa+ bb;

高端用法：

1、Latex數學公式

 CSDN可以使用latex語法來渲染數學公式，例如：

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall
n\in\mathbb N$ 是通過歐拉積分
$$
\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.
$$

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通過歐拉積分
$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$
更多latex數學符號詳見：常用數學符號的 LaTeX 表示方法
kaTeX數學表達式參見：KaTeX

2、甘特圖

 一個常見的甘特圖例子如下：

　```mermaid
	gantt
	        dateFormat  YYYY-MM-DD
	        title Adding GANTT diagram functionality to mermaid
	        section 現有任務
	        已完成               :done,    des1, 2014-01-06,2014-01-08
	        進行中               :active,  des2, 2014-01-09, 3d
	        計劃一               :         des3, after des2, 5d
	        計劃二               :         des4, after des3, 5d
　```
	#甘特圖代碼例子

更多甘特圖用法參考：參考文檔

3、UML序列圖
 一個常見的UML序列圖例子如下：

	```mermaid
	sequenceDiagram
	張三 ->> 李四: 你好！李四, 最近怎麼樣?
	李四-->>王五: 你最近怎麼樣，王五？
	李四--x 張三: 我很好，謝謝!
	李四-x 王五: 我很好，謝謝!
	Note right of 王五: 李四想了很長時間, 文字太長了<br/>不適合放在一行.

	李四-->>張三: 打量着王五...
	張三->>王五: 很好... 王五, 你怎麼樣?
	```
	#UML序列圖代碼例子

更多UML序列圖用法參考： 參考文檔

4、Mermaid流程圖

 一個常見的Mermaid流程圖例子如下：

	```mermaid
	graph LR
	A[長方形] -- 鏈接 --> B((圓))
	A --> C(圓角長方形)
	B --> D{菱形}
	C --> D
	```
	#Mermaid流程圖代碼例子

更多Mermaid流程圖用法參考：參考文檔

5、Flowchart流程圖

 一個常見的Flowchart流程圖例子如下：

	```mermaid
	flowchat
	st=>start: 開始
	e=>end: 結束
	op=>operation: 我的操作
	cond=>condition: 確認？

	st->op->cond
	cond(yes)->e
	cond(no)->op
	```
	Flowchart流程圖代碼例子

更多Flowchart流程圖用法參考：參考文檔

導出與導入

• 導出
  當你完成了一篇文章的寫作, 在上方工具欄找到 文章導出 按鈕，生成一個.md文件或者.html文件進行本地保存。

• 導入
  如果你想加載一篇你寫過的.md文件或者.html文件，在上方工具欄可以選擇導入功能進行對應擴展名的文件導入，然後繼續你的創作。

離線寫博客

 即使用戶在沒有網絡的情況下，也可以通過本編輯器離線寫博客（直接在曾經使用過的瀏覽器中輸入https://mp.csdn.net/即可。Markdown編輯器使用瀏覽器離線存儲將內容保存在本地。
 用戶寫博客的過程中，內容實時保存在瀏覽器緩存中，在用戶關閉瀏覽器或者其它異常情況下，內容不會丟失。用戶再次打開瀏覽器時，會顯示上次用戶正在編輯的沒有發表的內容。
 博客發表後，本地緩存將被刪除。　
 當然，用戶可以選擇 把正在寫的博客保存到服務器草稿箱，即使換瀏覽器或者清除緩存，內容也不會丟失。

最後

 CSDN的markdown編輯器支持標準markdown的幾乎全部功能，同時也有一些小的功能擴充，如圖片拖拽、語法高亮支持的語言種類、即時預覽、同步滾動等。當然市面上還有很多好用的markdown編輯器，歡迎交流分享，也歡迎對本文章內容提出補充和修改。

 如果你喜歡其他的流行的markdown編輯器，請看我的另一篇文章《幾款主流好用的markdown編輯器介紹》
 如果你還喜歡傳統的富文本編輯器，請看我的另一篇文章《幾款主流好用的富文本編輯器（所見即所得常用編輯器）介紹》
 如果想了解markdown編輯器和富文本編輯器的區別，請參考《markdown編輯器與富文本編輯器優缺點比較，哪個更好用》

轉載請註明原文地址：https://blog.csdn.net/davidhzq/article/details/100904811

---

1. 這是腳註1 ↩︎

2. 這是腳註2 ↩︎