編輯排版神器---Markdown初級教學指南
阿新 • • 發佈：2018-12-19
寫在前面的話
最近看了一下Markdown，然後就對它產生了濃厚的興趣，尤其是排版的時候，可以讓你快速由一些指令生成相應的格式，提高成噸的編輯部落格的效率有木有！它是一種可以使用普通文字編輯器編寫的輕量級的標記語言，通過簡單的標記語法，它可以使普通文字內容具有一定的格式，下面就跟我一起學習一下吧。
設定標題
# 這是一級標題
## 這是二級標題
### 這是三級標題
......
注：最多支援六級標題
書寫格式：# + 空格
效果展示：
字型文字格式
字型加粗可以使用： **加粗樣式** ---- 快捷鍵：Control/Commad + B 字型斜體可以使用： *斜體樣式* ---- 快捷鍵： Control/Command + I 標記文字或字型可使用： ==標記文字== 刪除文字可以使用： ~~要刪除的文字~~
字型加粗可以使用： 加粗樣式
字型斜體可以使用： 斜體樣式
標記文字或字型可使用： 標記文字
刪除文字可以使用： 要刪除的文字
無序和有序列表
無序列表：
快捷鍵： Ctrl/Command + Shift + U
* + 空格鍵 產生無序列表的點
無序列表可以巢狀，其二級無序列表的寫法為 ：Tab + * + 空格
有序列表：
快捷鍵： Ctrl/Command + Shift + O
無序列表效果：
* + 空格鍵產生無序列表- 專案一
- 專案二
- 專案二的子專案，產生此效果使用：
Tab + * + 空格
- 專案二的子專案，產生此效果使用：
插入圖片
有時候我們需要插入一些圖片，設定圖片的大小和位置等，我們用如下操作。
快捷鍵：Control+ Shift + I
Ctrl/Command + Shift + G
格式：
如果想調整圖片的寬度，則在圖片的描述後加` -w+圖片寬度`即可，要設定對齊，則可以如下設定:左對齊為`-l140`，居中為`-c140`，右對齊為`-r140`即可。
示例：
連結
平時我們可能會寫到一些網址的連結，包括E-Mail等，可以用如下形式來寫：
CSDN插入連結快捷鍵：Ctrl/Command + Shift + L
示例：
email <[email protected]>
[GitHub](http://github.com)
自動生成連結 <http://www.github.com/>
區塊引用
用">"來表示，可以用來進行程式碼的註釋，支援巢狀格式。
示例：
>第一行引用
>第二行引用
>>第二級引用
>>>第三級引用
結束的話需要多敲一行空格
效果:
第一行引用 第二行引用
第二級引用
第三級引用
多行程式碼
快捷鍵：Control/Command + Shift + K，在```後面寫上所需要高亮的程式語言即可。
如：```+c，```+javascript
C程式碼效果：
#include<stdio.h>
int main()
{
/*Code Here*/
printf("Hello World！/n");
}
JavaScript程式碼效果：
<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){continue}
document.write("數字是 " + i)
document.write("<br />")
}
</script>
<p>解釋：當 i=3 時，會中斷迴圈，並從下一個值開始繼續迴圈。</p>
</body>
</html>
表格
表格也是經常用的一種格式，書寫形式如下：
第一格表頭 | 第二格表頭
--------- | -------------
內容單元格 第一列第一格 | 內容單元格第二列第一格
內容單元格 第一列第二格 多加文字 | 內容單元格第二列第二格
效果：
| 第一格表頭 | 第二格表頭 |
|---|---|
| 內容單元格 第一列第一格 | 內容單元格第二列第一格 |
| 內容單元格 第一列第二格 多加文字 | 內容單元格第二列第二格 |
分割線
以下三種格式均可生成分割線：
***
*****
- - -
同樣的，結束需要多加一行空格才行。
效果：
TOC操作
[TOC]可以生成目錄，即生成標題的操作。
示例：
@[toc]
效果
繪圖相關操作
mermaid
mermaid 是比較流行的畫相簿，它支援流程圖、順序圖和甘特圖，它的官網為：https://mermaidjs.github.io/ ，mermaid 的語法就是宣告程式碼塊的語言為 mermaid，程式碼塊中再寫上 mermaid 的畫圖語法即可。
```mermaid
sequenceDiagram
participant A
participant B
A->>B: Hello John, Do you have Mifan?
loop Healthcheck
C->>C: Fight against Cancer!
end
Note right of C: Rational thoughts <br/>prevail...
B-->>A: Great!
C->>B: How about you?
B-->>C: Jolly good!
```
甘特圖：
```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
```
效果：
甘特圖效果：
Graphviz
Graphviz 是開源的畫圖軟體，它的官網為 http://www.graphviz.org/。
以下程式碼可以複製到CSDN的Markdown編輯器中使用，在嘗試時可以把 dot 換成 circo, fdp, neato, osage, twopi 這幾種來嘗試效果。
```dot
digraph G {
subgraph cluster_0 {
style=filled;
color=lightgrey;
node [style=filled,color=white];
a0 -> a1 -> a2 -> a3;
label = "process #1";
}
subgraph cluster_1 {
node [style=filled];
b0 -> b1 -> b2 -> b3;
label = "process #2";
color=blue
}
start -> a0;
start -> b0;
a1 -> b3;
b2 -> a3;
a3 -> a0;
a3 -> end;
b3 -> end;
start [shape=Mdiamond];
end [shape=Msquare];
}
```
注：(CSDN不支援這種畫圖方式~~)
echarts
echarts 是百度出口的 js 畫相簿，它的網址為：http://echarts.baidu.com/index.html，功能非常強大，Mweb支援 echarts 的一些基本的用法，太高階的不支援。你可以去 http://echarts.baidu.com/examples/index.html 這個網址檢視一些例子，要注意的是 CSDN只能解析 option = {} 這種簡單的，不過應該是足夠使用了。(CSDN不支援)
###順序圖和流程圖
順序圖和流程圖是使用 http://bramp.github.io/js-sequence-diagrams/, http://adrai.github.io/flowchart.js/ 這兩個畫相簿，以下是它在CSDN 中的 Markdown 語法。
```mermaid
sequenceDiagram
張三->>李四: 嘿，小四兒, 寫部落格了沒?
Note right of 李四: 李四愣了一下，說：
李四-->>張三: 忙得吐血，哪有時間寫。
```
```mermaid
flowchat
st=>start: 開始
e=>end: 結束
op=>operation: 我的操作
cond=>condition: 確認？
st->op->cond
cond(yes)->e
cond(no)->op
```
順序圖效果：
流程圖效果：
腳註
腳註用法如下：
這是一個腳註：[^sample_footnote]
[^sample_footnote]: 這裡是腳註資訊
這是一個腳註：1
這裡是腳註資訊 ↩︎