Markdown Cheatsheet 中文版

這篇文章旨在作為快速參考與展示。要更多完整的資訊，請見 John Gruber 原本的規格與 Github 偏好的 Markdown（Github-flavored Markdown，簡寫為GFM）資訊頁。

如果你正在找 Markdown Here 的小抄（Cheatsheet），這裡也有一篇。你也可以看看更多 Markdown 的工具。

譯註：可以參考這份中文版文件，有更詳盡的 Markdown 語法說明；如果需要可以練習的線上編輯器，可以試試看HackMD。

目錄

Headers Emphasis Lists `` Links Images Code and Syntax Highlighting Tables Blockquotes Inline HTML Horizontal Rule Line Breaks Youtube videos

標題# H1## H2### H3#### H4##### H5###### H6你也可以使用下劃線的方式標記 H1 與 H2：Alt-H1======Alt-H2------H1H2H3H4H5H6你也可以使用下劃線的方式標記 H1 與 H2：Alt-H1Alt-H2重點重點，又被稱為斜體，在兩邊加上 *星號* 或是 _下劃線_ 。更強的重點，又稱為粗體，在兩邊加上 **兩個星號** 或是 __兩個下劃線__ 。也可以用 **星號與 _下劃線_** 結合重點。刪除線使用兩個波浪符號。 ~~刪除這個。~~重點，又被稱為斜體，在兩邊加上 星號 或是 下劃線 。更強的重點，又稱為粗體，在兩邊加上 兩個星號 或是 兩個下劃線 。也可以用 星號與 下劃線 結合重點。刪除線使用兩個波浪符號。 刪除這個。列表（在這個例子裡，前置與後面的空白以點的方式顯示：⋅） (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

這是一個行內樣式的連結

這是一個加上標題的行內樣式連結

這是一個引用樣式的連結

以相對的文件路徑引用其他文件

可以用數字來宣告一個引用樣式的連結

或讓他空白並使用連結文字本身。

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

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

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

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

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

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

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

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

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

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

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

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*無法* 運作的 **非常** 好。改用 HTML標籤。水平線三個或更多個……---連字符***星號___下劃線三個或更多個……連字符星號下劃線斷行如果你想要學習斷行如何運作，我基本上建議最好就是實驗看看 ── 按一下（也就是，插入一個換行符號），接著再按一次 (也就是，插入兩個換行符號)，看看會發生什麼。你很快就會得到你想要的。「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，不過會無法改變圖片的大小與邊框：[](http://www.youtube.com/watch?v=YOUTUBE影片ID放在這裡)可以在 git commit 裡面用 #bugID 的方式引用一個 bug，比如說 #1。

License: CC-BY

翻譯自 adam-p 的 wiki

本文短網址： bit.ly/mdcheat

參考

graph TD;
A --> B;

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

流程圖

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

時序圖

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!

狀態圖

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

類別圖

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()
}

甘特圖

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

圓餅圖

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*}$$