# Markdown Cheatsheet 中文版

這篇文章旨在作為快速參考與展示。要更多完整的資訊，請見 [John Gruber 原本的規格](http://daringfireball.net/projects/markdown/)與 [Github 偏好的 Markdown（Github-flavored Markdown，簡寫為GFM）資訊頁](http://github.github.com/github-flavored-markdown/)。

如果你正在找 Markdown Here 的小抄（Cheatsheet），[這裡](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet)也有一篇。你也可以看看更多 Markdown 的工具。

譯註：可以參考這份[中文版文件](http://markdown.tw/)，有更詳盡的 Markdown 語法說明；如果需要可以練習的線上編輯器，可以試試看[HackMD](https://hackmd.io/)。

**目錄**

[Headers](#headers)\
[Emphasis](#emphasis)\
[Lists](#lists) \`\` [Links](#links)\
[Images](#images)\
[Code and Syntax Highlighting](#code)\
[Tables](#tables)\
[Blockquotes](#blockquotes)\
[Inline HTML](#html)\
[Horizontal Rule](#hr)\
[Line Breaks](#lines)\
[Youtube videos](#videos)

標題# H1## H2### H3#### H4##### H5###### H6你也可以使用下劃線的方式標記 H1 與 H2：Alt-H1======Alt-H2------H1H2H3**H4H5H6**你也可以使用下劃線的方式標記 H1 與 H2：Alt-H1Alt-H2重點重點，又被稱為斜體，在兩邊加上 \*星號\* 或是 \_下劃線\_ 。更強的重點，又稱為粗體，在兩邊加上 \*\*兩個星號\*\* 或是 \_\_兩個下劃線\_\_ 。也可以用 \*\*星號與 \_下劃線\_\*\* 結合重點。刪除線使用兩個波浪符號。 \~\~刪除這個。\~\~重點，又被稱為斜體，在兩邊加上 _星號_ 或是 _下劃線_ 。更強的重點，又稱為粗體，在兩邊加上 **兩個星號** 或是 **兩個下劃線** 。也可以用 **星號與&#x20;**_**下劃線**_ 結合重點。刪除線使用兩個波浪符號。 ~~刪除這個。~~列表（在這個例子裡，前置與後面的空白以點的方式顯示：⋅） (In this example, leading and trailing spaces are shown with with dots: ⋅)1. 第一個有序列表項目2. 另一個項目⋅⋅⋅\* 無序子列表 1. 實際數字不重要，只要它是一個數字⋅⋅⋅1. 有序子列表4. 與其他項目⋅⋅⋅要在列表項目下加入段落，只要縮進就好了。注意前面的空白行，以及前置的空白（至少要一個空白，不過我們在這裡會使用三個空白以剛好對齊原始的文字）。⋅⋅⋅要使文字段行而不會成為新的段落，你只需要在後面加上兩個空白。⋅⋅⋅⋅⋅注意這行已經分開了，不過還是在同樣的段落中。⋅⋅⋅（如果不要求後面的兩個空格，就為伴了典型的 GFM 斷行格式。）\* 無序列表可以使用星號- 或減號+ 或加號第一個有序列表項目另一個項目無序子列表實際數字不重要，只要它是一個數字有序子列表與其他項目要在列表項目下加入段落，只要縮進就好了。注意前面的空白行，以及前置的空白（至少要一個空白，不過我們在這裡會使用三個空白以剛好對齊原始的文字）。要使文字段行而不會成為新的段落，你只需要在後面加上兩個空白。\
注意這行已經分開了，不過還是在同樣的段落中。 （如果不要求後面的兩個空格，就為伴了典型的 GFM 斷行格式。）無序列表可以使用星號或減號或加號連結`有兩個方法可以建立連結`\[這是一個行內樣式的連結]\(https://www.google.com)\[這是一個加上標題的行內樣式連結]\(https://www.google.com "Google 的首頁")\[這是一個引用樣式的連結]\[任意不區分大小寫的文字]\[以相對的文件路徑引用其他文件]\(../blob/master/LICENSE)\[可以用數字來宣告一個引用樣式的連結]\[1]或讓他空白並使用\[連結文字本身]。網址，或是尖括號中的網址會自動轉換成連結。http://www.example.com 或 \<http://www.example.com> 甚至有時候 example.com 也可以（只是舉例，Github上無效）。引用連結可以在一些文字後面。\[任意不區分大小寫的文字]: https://www.mozilla.org\[1]: http://slashdot.org\[連結文字本身]: http://www.reddit.com

[這是一個行內樣式的連結](https://www.google.com)

[這是一個加上標題的行內樣式連結](https://www.google.com)

[這是一個引用樣式的連結](https://www.mozilla.org)

[以相對的文件路徑引用其他文件](https://github.com/KerryHuang/Book/blob/main/blob/master/LICENSE/README.md)

[可以用數字來宣告一個引用樣式的連結](http://slashdot.org)

或讓他空白並使用[連結文字本身](http://www.reddit.com)。

網址，或是尖括號中的網址會自動轉換成連結。 http://www.example.com 或 [http://www.example.com](http://www.example.com) 甚至有時候 example.com 也可以（只是舉例，Github上無效）。

引用連結可以在一些文字後面。

圖片這是我們的 Logo（把游標指向 Logo 可以看到標題文字）行內樣式：!\[alt 文字]\(https://raw.githubusercontent.com/adam-p/markdown-here/master/src/common/images/icon48.png "Logo 標題文字 1")引用樣式: !\[alt 文字]\[logo]\[logo]: https://raw.githubusercontent.com/adam-p/markdown-here/master/src/common/images/icon48.png "Logo 標題文字 2"這是我們的 Logo（把游標指向 Logo 可以看到標題文字）行內樣式： ![alt 文字](https://raw.githubusercontent.com/adam-p/markdown-here/master/src/common/images/icon48.png)引用樣式: ![alt 文字](https://raw.githubusercontent.com/adam-p/markdown-here/master/src/common/images/icon48.png)程式碼與語法高亮

程式碼區塊是 Markdown 規格的一部分，不過語法高亮不是。無論如何，許多渲染器──如 Github 和 _Markdown Here_ ──支援語法高亮。每個渲染器支援的程式語言，以及程式語言的名字寫法都不一樣。_Markdown Here_ 支援幾十種語言（以及不一定是真的程式語言，像 diffs 與 HTTP headers）的語法高亮；要看完整的列表，以及語言的名稱，請見 [highlight.js 的示範頁](http://softwaremaniacs.org/media/soft/highlight/test.html)。

```no-highlight
行內的 `程式碼` 用 `反引號` 包圍起來。
Inline `code` has `back-ticks around` it.
```

行內的 `程式碼` 用 `反引號` 包圍起來。

程式碼區塊可以用只有三個反引號` ``` `的一行圍起來，或是以四個空格縮排。我建議用三個反引號的方式圍起來 ── 這比較簡單，而且只有這個方式支援語法高亮。

````
```javascript
var s = "JavaScript 語法高亮";
alert(s);
```

```python
s = "Python 語法高亮"
print s
```

```
沒有指定程式語言，所以沒有語法高亮。
不過，我們可以放進一個 標籤。
```
````

```javascript
var s = "JavaScript 語法高亮";
alert(s);
```

```python
s = "Python 語法高亮"
print s
```

```
沒有指定程式語言，所以 Markdown Here 沒有語法高亮（在Github 上可能不一樣）。
不過，我們可以放進一個 <b>標籤</b>。
```

表格Markdown 的核心標準沒有表格，不過表格是 GFM 的一部分，而且 _Markdown Here_ 支援表格。這是在電子郵件中加入表格的好方法 － 本來是需要從其他應用程式複製貼上的工作。冒號可以用來標示欄位的對齊方式。| Tables        | Are           | Cool  || ------------- |:-------------:| -----:|| 第三欄        | 靠右對齊      | $1600 || 第二欄        | 置中對齊      |   $12 || 斑馬條紋      | 是整齊的      |    $1 |每個標頭元件都要用至少三個破折號分隔開來。最外面的豎線可以省略，你也不需要讓原始的文字排列整齊。你也可以使用行內樣式的 Markdown。不 | 漂亮 | 的文字--- | --- | ---\*依然\* | \`渲染的\` | \*\*很好\*\*1 | 2 | 3冒號可以用來標示欄位的對齊方式。每個標頭元件都要用至少三個破折號分隔開來。 最外面的豎線可以省略，你也不需要讓原始的文字排列整齊。你也可以使用行內樣式的 Markdown。引用文字> 在電子郵件中，引用文字可以很方便的模擬回應的文字。> 這行也在同樣的引用區塊。引用區塊結束> 就算這行很長，只要包裹的好，依然可以很好的被引用。哦，我們繼續寫以保證每個人都確實的被包在裡面。喔，你也可以在引用文字中 \*放入\* 其他 \*\*Markdown\*\* 語法。在電子郵件中，引用文字可以很方便的模擬回應的文字。 這行也在同樣的引用區塊。引用區塊結束就算這行很長，只要包裹的好，依然可以很好的被引用。哦，我們繼續寫以保證每個人都確實的被包在裡面。喔，你也可以在引用文字中 _放入_ 其他 **Markdown** 語法。行內 HTML你也可以在 Markdown 裡面撰寫原始的 HTML，這些 HTML 一樣大多數運作的很好。\<dl>  \<dt>定義列表\</dt>  \<dd>有時候，人們偶爾會用到。\</dd>  \<dt>在 HTML 中撰寫 Markdown\</dt>  \<dd>\*無法\* 運作的 \*\*非常\*\* 好。改用 HTML\<em>標籤\</em>。\</dd>\</dl>定義列表有時候，人們偶爾會用到。在 HTML 中撰寫 Markdown\*無法\* 運作的 \*\*非常\*\* 好。改用 HTM&#x4C;_&#x6A19;籤_。水平線三個或更多個……---連字符\*\*\*星號\_\_\_下劃線三個或更多個……連字符星號下劃線斷行如果你想要學習斷行如何運作，我基本上建議最好就是實驗看看 ── 按一下（也就是，插入一個換行符號），接著再按一次 (也就是，插入兩個換行符號)，看看會發生什麼。你很快就會得到你想要的。「Markdown Toggle」是你的好朋友。你可以試試看這裡的一些方式：我們從這一行開始。兩個換行符號分開了這行和前面那一行，所以這會變成 \*\*分開的段落\*\* 。這行也是個分開的段落，不過……只有一個換行符號分開這行，所以這是 \*同段落\* 中的分開兩行。我們從這一行開始。兩個換行符號分開了這行和前面那一行，所以這會變成 **分開的段落** 。這行也是個分開的段落，不過…… 只有一個換行符號分開這行，所以這是 _同段落_ 中的分開兩行。（技術提示: _Markdown Here_ 使用 GFM 的換行，所以不用使用 Markdown 原先的兩個空格換行法。）Youtube 影片Youtube 影片無法直接被加入，不過我們可以加入圖片，在圖片上設定連結到影片，像這樣：\<a href="http://www.youtube.com/watch?feature=player\_embedded\&v=YOUTUBE影片ID放在這裡" target="\_blank">\<img src="http://img.youtube.com/vi/YOUTUBE影片ID放在這裡/0.jpg" alt="圖片 ALT 文字放在這裡" width="240" height="180" border="10" />\</a>或是，用單純的 Markdown，不過會無法改變圖片的大小與邊框：\[!\[圖片 ALT 文字放在這裡]\(http://img.youtube.com/vi/YOUTUBE影片ID放在這裡/0.jpg)]\(http://www.youtube.com/watch?v=YOUTUBE影片ID放在這裡)可以在 `git commit` 裡面用 #bugID 的方式引用一個 bug，比如說 #1。

License: [CC-BY](https://creativecommons.org/licenses/by/3.0/)

翻譯自 [adam-p](https://github.com/adam-p/) 的 [wiki](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)

本文短網址： [bit.ly/mdcheat](https://bit.ly/mdcheat)

[參考](https://medium.com/@mdzeng/%E5%AF%AB%E4%BD%9C-%E7%AD%86%E8%A8%98%E7%A5%9E%E5%99%A8markdown-%E7%9C%9F%E5%B8%8C%E6%9C%9B%E6%88%91%E5%AD%B8%E7%94%9F%E6%99%82%E6%9C%9F%E5%B0%B1%E6%87%82-26becb160f6e)

```mermaid
graph TD;
A --> B;
```

```mermaid
graph LR
A[Hard edge] --> B(Round edge)
B --> C{Decision}
C --> |One| D[Result one]
C --> |Two| E[Result two]
```

### 流程圖

```mermaid
graph TD;
A --> B;
A --> C;
B --> D;
```

### 時序圖

```mermaid
sequenceDiagram
Alice ->> John: Hello John, how are you?
loop Healthcheck
	John ->> John : Fight against hypochondria
end
Note right of John : Rational thoughts!
John -->> Alice: Great!
John ->> Bob: How about you?
Bob -->> John : Jolly good!
```

### 狀態圖

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
```

### 類別圖

```mermaid
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal : +mate()
class Duck{
	+String beakColor
	+swim()
	+quack()
}
class Fish{
	-int sizeInFeet
	-canEat()
}
class Zebra{
	+bool is_wild
	+run()
}

```

### 甘特圖

```mermaid
gantt
	title 工作計劃
	dateFormat YYYY-MM-DD
	section Section
	A task            :a1, 2020-01-01, 30d
	Another task      :after a1, 20d
	section Another
	Task in sec       : 2020-01-12, 12d
	another task      : 24d
```

### 圓餅圖

```mermaid
pie
	title Key elements in Product X
	"Calcium"    : 42.96
	"Magnesium"  : 10.01
	"Magnesium"  : 10.01
	"Iron"       : 5
```

### 數學

$$
\begin{align*} y = y(x,t) &= A e^{i\theta} \\ &= A (\cos \theta + i \sin \theta) \\ &= A (\cos(kx - \omega t) + i \sin(kx - \omega t)) \\ &= A\cos(kx - \omega t) + i A\sin(kx - \omega t) \\ &= A\cos \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) + i A\sin \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) \\ &= A\cos \frac{2\pi}{\lambda} (x - v t) + i A\sin \frac{2\pi}{\lambda} (x - v t) \end{align*}
$$
