Markdown語法（較全面）

阿新 • • 發佈：2020-09-14

Markdown 標題

Markdown 標題有兩種格式。

使用 = 和 - 標記一級和二級標題

= 和 - 標記語法格式如下：

我展示的是一級標題
=================

我展示的是二級標題
-----------------

顯示效果如下圖：

使用 # 號標記

使用 # 號可表示 1-6 級標題，一級標題對應一個 # 號，二級標題對應兩個 # 號，以此類推。

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

顯示效果如下圖：

Markdown 段落

Markdown 段落沒有特殊的格式，直接編寫文字就好，段落的換行是使用兩個以上空格加上回車

。

當然也可以在段落後面使用一個空行來表示重新開始一個段落。

字型

Markdown 可以使用以下幾種字型：

*斜體文字*
_斜體文字_
**粗體文字**
__粗體文字__
***粗斜體文字***
___粗斜體文字___

顯示效果如下所示：

斜體文字
斜體文字
粗體文字
粗體文字
粗斜體文字
粗斜體文字

分隔線

你可以在一行中用三個以上的星號、減號、底線來建立一個分隔線，行內不能有其他東西。你也可以在星號或是減號中間插入空格。下面每種寫法都可以建立分隔線：

***

* * *

*****

- - -

----------

顯示效果如下所示：

刪除線

如果段落上的文字要新增刪除線，只需要在文字的兩端加上兩個波浪線 ~~

即可，例項如下：

RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~

顯示效果如下所示：

RUNOOB.COM
GOOGLE.COM
~~BAIDU.COM~~

下劃線

下劃線可以通過 HTML 的標籤來實現：

<u>帶下劃線文字</u>

顯示效果如下所示：

帶下劃線文字

腳註

腳註是對文字的補充說明。

Markdown 腳註的格式如下:

[^要註明的文字]

以下例項演示了腳註的用法：

建立腳註格式類似這樣 [^RUNOOB]。

[^RUNOOB]: 菜鳥教程 -- 學的不僅是技術，更是夢想！！！

演示效果如下：

建立腳註格式類似這樣 ^[1]。

Markdown 列表

Markdown 支援有序列表和無序列表。

無序列表使用星號()、加號(+)或是減號(-*)作為列表標記，這些標記後面要新增一個空格，然後再填寫內容：

* 第一項
* 第二項
* 第三項

+ 第一項
+ 第二項
+ 第三項


- 第一項
- 第二項
- 第三項

顯示結果如下：

第一項
第二項
第三項

第一項
第二項
第三項

第一項
第二項
第三項

有序列表使用數字並加上 . 號來表示，如：

1. 第一項
2. 第二項
3. 第三項

顯示結果如下：

第一項
第二項
第三項

列表巢狀

列表巢狀只需在子列表中的選項前面新增四個空格即可：

1. 第一項：
    - 第一項巢狀的第一個元素
    - 第一項巢狀的第二個元素
2. 第二項：
    - 第二項巢狀的第一個元素
    - 第二項巢狀的第二個元素

顯示結果如下：

第一項：
- 第一項巢狀的第一個元素
- 第一項巢狀的第二個元素
第二項：
- 第二項巢狀的第一個元素
- 第二項巢狀的第二個元素

Markdown 區塊

Markdown 區塊引用是在段落開頭使用 > 符號，然後後面緊跟一個空格符號：

> 區塊引用
> 菜鳥教程
> 學的不僅是技術更是夢想

顯示結果如下：

區塊引用
菜鳥教程
學的不僅是技術更是夢想

另外區塊是可以巢狀的，一個 > 符號是最外層，兩個 > 符號是第一層巢狀，以此類推：

> 最外層
> > 第一層巢狀
> > > 第二層巢狀

顯示結果如下：

最外層

第一層巢狀

第二層巢狀

區塊中使用列表

區塊中使用列表例項如下：

> 區塊中使用列表
> 1. 第一項
> 2. 第二項
> + 第一項
> + 第二項
> + 第三項

顯示結果如下：

區塊中使用列表

第一項

第二項

第一項

第二項

第三項

列表中使用區塊

如果要在列表專案內放進區塊，那麼就需要在 > 前新增四個空格的縮排。

區塊中使用列表例項如下：

* 第一項
    > 菜鳥教程
    > 學的不僅是技術更是夢想
* 第二項

顯示結果如下：

第一項

菜鳥教程
學的不僅是技術更是夢想
第二項

Markdown 程式碼

如果是段落上的一個函式或片段的程式碼可以用反引號把它包起來（`），例如：

`printf()` 函式

顯示結果如下：

printf() 函式

程式碼區塊

程式碼區塊使用 4 個空格或者一個製表符（Tab 鍵）。

例項如下：

<?php

echo 'RUNOOB';

function test(){

echo 'test'

}

顯示結果如下：

<?php

echo 'RUNOOB';

function test(){

echo 'test'

}

你也可以用 ``` 包裹一段程式碼，並指定一種語言（也可以不指定）：

```javascript
$(document).ready(function () {
    alert('RUNOOB');
});
```

顯示結果如下：

$(document).ready(function () {
    alert('RUNOOB');
});

Markdown 連結

連結使用方法如下：

[連結名稱](連結地址)

或者

<連結地址>

例如：

這是一個連結 [菜鳥教程](https://www.runoob.com)

顯示結果如下：

這是一個連結菜鳥教程

直接使用連結地址：

<https://www.runoob.com>

顯示結果如下：

https://www.runoob.com

高階連結

我們可以通過變數來設定一個連結，變數賦值在文件末尾進行：

這個連結用 1 作為網址變數 [Google][1]
這個連結用 runoob 作為網址變數 [Runoob][runoob]
然後在文件的結尾為變數賦值（網址）

  [1]: http://www.google.com/
  [runoob]: http://www.runoob.com/

顯示結果如下：

這個連結用 1 作為網址變數 Google
這個連結用 runoob 作為網址變數 Runoob
然後在文件的結尾為變數賦值（網址）

Markdown 圖片

Markdown 圖片語法格式如下：

![alt 屬性文字](圖片地址)

![alt 屬性文字](圖片地址 "可選標題")

開頭一個感嘆號 !
接著一個方括號，裡面放上圖片的替代文字
接著一個普通括號，裡面放上圖片的網址，最後還可以用引號包住並加上選擇性的 'title' 屬性的文字。

使用例項：

![RUNOOB 圖示](http://static.runoob.com/images/runoob-logo.png)

![RUNOOB 圖示](http://static.runoob.com/images/runoob-logo.png "RUNOOB")

顯示結果如下：

當然，你也可以像網址那樣對圖片網址使用變數:

這個連結用 1 作為網址變數 [RUNOOB][1].
然後在文件的結尾為變數賦值（網址）

[1]: http://static.runoob.com/images/runoob-logo.png

顯示結果如下：

這個連結用 1 作為網址變數 RUNOOB.
然後在文件的結尾為變數賦值（網址）

Markdown 還沒有辦法指定圖片的高度與寬度，如果你需要的話，你可以使用普通的標籤。

<img src="http://static.runoob.com/images/runoob-logo.png" width="50%">

顯示結果如下：

Markdown 表格

Markdown 製作表格使用 | 來分隔不同的單元格，使用 - 來分隔表頭和其他行。

語法格式如下：

|  表頭   | 表頭  |
|  ----  | ----  |
| 單元格  | 單元格 |
| 單元格  | 單元格 |

以上程式碼顯示結果如下：

表頭	表頭
單元格	單元格
單元格	單元格

對齊方式

我們可以設定表格的對齊方式：

-: 設定內容和標題欄居右對齊。
:- 設定內容和標題欄居左對齊。
:-: 設定內容和標題欄居中對齊。

例項如下：

| 左對齊 | 右對齊 | 居中對齊 |
| :-----| ----: | :----: |
| 單元格 | 單元格 | 單元格 |
| 單元格 | 單元格 | 單元格 |

以上程式碼顯示結果如下：

左對齊	右對齊	居中對齊
單元格	單元格	單元格
單元格	單元格	單元格

Markdown 高階技巧

支援的 HTML 元素

不在 Markdown 涵蓋範圍之內的標籤，都可以直接在文件裡面用 HTML 撰寫。

目前支援的 HTML 元素有：<kbd> 等，如：

使用 <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> 重啟電腦

輸出結果為：

使用 Ctrl+Alt+Del 重啟電腦

轉義

Markdown 使用了很多特殊符號來表示特定的意義，如果需要顯示特定的符號則需要使用轉義字元，Markdown 使用反斜槓轉義特殊字元：

**文字加粗** 
\*\* 正常顯示星號 \*\*

輸出結果為：

文字加粗
** 正常顯示星號 **

Markdown 支援以下這些符號前面加上反斜槓來幫助插入普通的符號：

\   反斜線
`   反引號
*   星號
_   下劃線
{}  花括號
[]  方括號
()  小括號
#   井字號
+   加號
-   減號
.   英文句點
!   感嘆號

公式

當你需要在編輯器中插入數學公式時，可以使用兩個美元符 $$ 包裹 TeX 或 LaTeX 格式的數學公式來實現。提交後，問答和文章頁會根據需要載入 Mathjax 對數學公式進行渲染。如：

$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix} 
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}}
$$

輸出結果為：

\[\mathbf{V}_1 \times \mathbf{V}_2 = \begin{vmatrix} \mathbf{i} & \mathbf{j} & \mathbf{k} \\ \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\ \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\ \end{vmatrix} ${$tep1}{\style{visibility:hidden}{(x+1)(x+1)}} \]

ypora 畫流程圖、時序圖(順序圖)、甘特圖

以下幾個例項效果圖如下：

1、橫向流程圖原始碼格式：

```mermaid
graph LR
A[方形] -->B(圓角)
    B --> C{條件a}
    C -->|a=1| D[結果1]
    C -->|a=2| E[結果2]
    F[橫向流程圖]
```

效果圖如下：

graph LR A[方形] -->B(圓角) B --> C{條件a} C -->|a=1| D[結果1] C -->|a=2| E[結果2] F[橫向流程圖]

2、豎向流程圖原始碼格式：

```mermaid
graph TD
A[方形] --> B(圓角)
    B --> C{條件a}
    C --> |a=1| D[結果1]
    C --> |a=2| E[結果2]
    F[豎向流程圖]
```

效果圖如下：

graph TD A[方形] --> B(圓角) B --> C{條件a} C --> |a=1| D[結果1] C --> |a=2| E[結果2] F[豎向流程圖]

3、標準流程圖原始碼格式：

```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op
```

效果圖如下：

st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

4、標準流程圖原始碼格式（橫向）：

```flow
st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op
```

效果圖如下：

st=>start: 開始框
op=>operation: 處理框
cond=>condition: 判斷框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 輸入輸出框
e=>end: 結束框
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

5、UML時序圖原始碼樣例：

```sequence
物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件A->物件B: 你真的好嗎？
```

效果圖如下：

物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件A->物件B: 你真的好嗎？

6、UML時序圖原始碼複雜樣例：

```sequence
Title: 標題：複雜使用
物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件B->小三: 你好嗎
小三-->>物件A: 物件B找我了
物件A->物件B: 你真的好嗎？
Note over 小三,物件B: 我們是朋友
participant C
Note right of C: 沒人陪我玩
```

效果圖如下：

Title: 標題：複雜使用
物件A->物件B: 物件B你好嗎?（請求）
Note right of 物件B: 物件B的描述
Note left of 物件A: 物件A的描述(提示)
物件B-->物件A: 我很好(響應)
物件B->小三: 你好嗎
小三-->>物件A: 物件B找我了
物件A->物件B: 你真的好嗎？
Note over 小三,物件B: 我們是朋友
participant C
Note right of C: 沒人陪我玩

7、UML標準時序圖樣例：

```mermaid
%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭
  sequenceDiagram
    participant 張三
    participant 李四
    張三->王五: 王五你好嗎？
    loop 健康檢查
        王五->王五: 與疾病戰鬥
    end
    Note right of 王五: 合理 食物 <br/>看醫生...
    李四-->>張三: 很好!
    王五->李四: 你怎麼樣?
    李四-->王五: 很好!
```

效果圖如下：

%% 時序圖例子,-> 直線，-->虛線，->>實線箭頭 sequenceDiagram participant 張三 participant 李四張三->王五: 王五你好嗎？ loop 健康檢查王五->王五: 與疾病戰鬥 end Note right of 王五: 合理食物 看醫生... 李四-->>張三: 很好! 王五->李四: 你怎麼樣? 李四-->王五: 很好!

8、甘特圖樣例：

```mermaid
%% 語法示例
        gantt
        dateFormat  YYYY-MM-DD
        title 軟體開發甘特圖
        section 設計
        需求                      :done,    des1, 2014-01-06,2014-01-08
        原型                      :active,  des2, 2014-01-09, 3d
        UI設計                     :         des3, after des2, 5d
    未來任務                     :         des4, after des3, 5d
        section 開發
        學習準備理解需求                      :crit, done, 2014-01-06,24h
        設計框架                             :crit, done, after des2, 2d
        開發                                 :crit, active, 3d
        未來任務                              :crit, 5d
        耍                                   :2d
        section 測試
        功能測試                              :active, a1, after des3, 3d
        壓力測試                               :after a1  , 20h
        測試報告                               : 48h
```

效果圖如下：

%% 語法示例 gantt dateFormat YYYY-MM-DD title 軟體開發甘特圖 section 設計需求 :done, des1, 2014-01-06,2014-01-08 原型 :active, des2, 2014-01-09, 3d UI設計 : des3, after des2, 5d 未來任務 : des4, after des3, 5d section 開發學習準備理解需求 :crit, done, 2014-01-06,24h 設計框架 :crit, done, after des2, 2d 開發 :crit, active, 3d 未來任務 :crit, 5d 耍 :2d section 測試功能測試 :active, a1, after des3, 3d 壓力測試 :after a1 , 20h 測試報告 : 48h

本文整理自：https://www.runoob.com/markdown/md-tutorial.html

菜鳥教程 -- 學的不僅是技術，更是夢想！！！ ↩︎

Markdown語法（較全面）

Markdown 標題

使用 = 和 - 標記一級和二級標題

使用 # 號標記

Markdown 段落

字型

分隔線

刪除線

下劃線

腳註

Markdown 列表

列表巢狀

Markdown 區塊

區塊中使用列表

列表中使用區塊

Markdown 程式碼

程式碼區塊

Markdown 連結

高階連結

Markdown 圖片

Markdown 表格

Markdown 高階技巧

支援的 HTML 元素

轉義

公式

ypora 畫流程圖、時序圖(順序圖)、甘特圖

相關推薦