終於，等到了我們的Markdown編輯器上線，天曉得，我是祭了幾個漂亮的運營小姐姐，才換來開發小哥哥的上線！！！（此處省略一個驚天地、泣鬼神的故事。）進入我們的正題，Markdown玩兒法介紹。

Markdown是一種可以使用普通文字編輯器編寫的標記語言，透過簡單的標記語法，它可以使普通文字內容具有一定的格式，其目標是實現易讀易寫。

**Markdown的優勢有以下三點：**

1. 沉浸式的寫作體驗，拒絕複雜的功能，能提高碼字效率
2. 良好的跨平臺相容性，不必擔心格式錯亂
3. 簡單的語法，上手速度快

它的介面是介個樣子的：

![](http://img.blog.itpub.net/blog/2018/12/24/ea462da79774aed4.png?x-oss-process=style/bb)

##一.我們先看看它的工具欄，前面這些就不贅述了，大家都很熟，重點看看下面這幾個：

- 實時預覽：沉浸式記錄，可見即所得

![](http://img.blog.itpub.net/blog/2018/12/24/7d2af3334d6584c8.png?x-oss-process=style/bb)

![](http://img.blog.itpub.net/blog/2018/12/24/f99371b57fa3dcdd.png?x-oss-process=style/bb)

- 全視窗預覽HTML

![](http://img.blog.itpub.net/blog/2018/12/24/1c1c42180920adc0.png?x-oss-process=style/bb)

- 全屏（按ESC還原）

![](http://img.blog.itpub.net/blog/2018/12/24/874f15f0f1a887c2.png?x-oss-process=style/bb)

![](http://img.blog.itpub.net/blog/2018/12/24/6a3844828308c464.png?x-oss-process=style/bb)

- 更多幫助：（點選見全部詳情）

![](http://img.blog.itpub.net/blog/2018/12/24/c2111d292c9ac3c2.png?x-oss-process=style/bb)

![](http://img.blog.itpub.net/blog/2018/12/24/9e222daca0ca094d.png?x-oss-process=style/bb)

- 一鍵切換富文字：或許你還不是太適應使用Markdown編輯器，那也沒關係，可一鍵切換會原版本（富文字）。

注：在編輯過程中，不可切換

![](http://img.blog.itpub.net/blog/2018/12/24/e745fb03142d8bfb.png?x-oss-process=style/bb)

![](http://img.blog.itpub.net/blog/2018/12/24/9534a31fe66be7b2.png?x-oss-process=style/bb)

##二.基礎常用語法

### 標題

- 一號到六號標題, 1-6個"#" 加空格加標題

```
  # 標題一
  ## 標題二
  ### 標題三
  ```

**列表****

- 無序列表："-"加空格加文字
- 有序列表："數字."加空格加文字
- 列表支援巢狀，行首使用Tab縮排

```
1. 有序列表一
2. 有序列表二
3. 有序列表三
    - 無序子列表一
    - 無序子列表二
```

### 換行

- 在Markdown裡直接用回車換行是沒有用的，要使用雙空格加回車

### 引用

- 在行首新增">"加空格

```
  > 我是引用
  ```

### 橫線

- 另起一行，新增"---"加回車

```
  ---
  上面是橫線
  ```

### 字型樣式

```
*斜體*
**加粗**
++下劃線++
~~刪除線~~
```

### 連結

Markdown 支援兩種形式的連結語法： 行內式和參考式兩種形式。

不管是哪一種，連結文字都是用 [方括號] 來標記。

要建立一個行內式的連結，只要在方塊括號後面緊接著圓括號並插入網址連結即可，如果你還想要加上鍊接的 title 文字，只要在網址後面，用雙引號把 title 文字包起來即可，例如：

```md
This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.
```

會產生：

```md
This is <a href="http://example.com/" title="Title" rel="nofollow">
an example</a> inline link.

<a href="http://example.net/" rel="nofollow">This link</a> has no
title attribute.
```

如果你是要連結到同樣主機的資源，你可以使用相對路徑：

```md
See my [About](/about/) page for details.
```

參考式的連結是在連結文字的括號後面再接上另一個方括號，而在第二個方括號裡面要填入用以辨識連結的標記：

```md
This is [an example][id] reference-style link.
```

你也可以選擇性地在兩個方括號中間加上一個空格：

```md
This is [an example] [id] reference-style link.
```

接著，在檔案的任意處，你可以把這個標記的連結內容定義出來：

```md
[id]: http://example.com/  "Optional Title Here"
```

連結內容定義的形式為：

- 方括號（前面可以選擇性地加上至多三個空格來縮排），裡面輸入連結文字
- 接著一個冒號
- 接著一個以上的空格或製表符
- 接著連結的網址
- 選擇性地接著 title 內容，可以用單引號、雙引號或是括弧包著

下面這三種連結的定義都是相同：

```md
[foo]: http://example.com/  "Optional Title Here"
[foo]: http://example.com/  'Optional Title Here'
[foo]: http://example.com/  (Optional Title Here)
```

**請注意：**有一個已知的問題是 Markdown.pl 1.0.1 會忽略單引號包起來的連結 title。

連結網址也可以用方括號包起來：

```md
[id]: "Optional Title Here"
```

你也可以把 title 屬性放到下一行，也可以加一些縮排，若網址太長的話，這樣會比較好看：

```md
[id]: http://example.com/longish/path/to/resource/here
    "Optional Title Here"
```

網址定義只有在產生連結的時候用到，並不會直接出現在檔案之中。

連結辨別標籤可以有字母、數字、空白和標點符號，但是並不區分大小寫，因此下面兩個連結是一樣的：

```md
[link text][a]
[link text][A]
```

隱式連結標記功能讓你可以省略指定連結標記，這種情形下，連結標記會視為等同於連結文字，要用隱式連結標記只要在連結文字後面加上一個空的方括號，如果你要讓 "Google" 連結到 google.com，你可以簡化成：

```md
[Google][]
```

然後定義連結內容：

```md
[Google]: http://google.com/
```

由於連結文字可能包含空白，所以這種簡化型的標記內也許包含多個單詞：

```md
Visit [Daring Fireball][] for more information.
```

然後接著定義連結

```md
[Daring Fireball]: http://daringfireball.net/
```

連結的定義可以放在檔案中的任何一個地方，我比較偏好直接放在連結出現段落的後面，你也可以把它放在檔案最後面，就像是註解一樣。

下面是一個參考式連結的範例：

```md
I get 10 times more traffic from [Google] [1] than from
[Yahoo] [2] or [MSN] [3].

[1]: http://google.com/        "Google"
  [2]: http://search.yahoo.com/  "Yahoo Search"
  [3]: http://search.msn.com/    "MSN Search"
```

如果改成用連結名稱的方式寫：

```md
I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

[google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"
```

上面兩種寫法都會產生下面的 HTML。

```md
I get 10 times more traffic from <a href="http://google.com/" title="Google" rel="nofollow">Google</a> than from
<a href="http://search.yahoo.com/" title="Yahoo Search" rel="nofollow">Yahoo</a>
or <a href="http://search.msn.com/" title="MSN Search" rel="nofollow">MSN</a>.
```

下面是用行內式寫的同樣一段內容的 Markdown 檔案，提供作為比較之用：

```md
I get 10 times more traffic from [Google](http://google.com/ "Google")
than from [Yahoo](http://search.yahoo.com/ "Yahoo Search") or
[MSN](http://search.msn.com/ "MSN Search").
```

參考式的連結其實重點不在於它比較好寫，而是它比較好讀，比較一下上面的範例，使用參考式的文章本身只有 81 個字元，但是用行內形式的卻會增加到 176 個字元，如果是用純 HTML 格式來寫，會有 234 個字元，在 HTML 格式中，標籤比文字還要多。

使用 Markdown 的參考式連結，可以讓檔案更像是瀏覽器最後產生的結果，讓你可以把一些標記相關的後設資料移到段落文字之外，你就可以增加連結而不讓文章的閱讀感覺被打斷。

### 強調

Markdown 使用星號（*）和底線（_）作為標記強調字詞的符號，被 * 或 _ 包圍的字詞會被轉成用 標籤包圍，用兩個 * 或 _ 包起來的話，則會被轉成 ，例如：

```md
*single asterisks*

_single underscores_

**double asterisks**

__double underscores__
```

會轉成：

```md
single asterisks

single underscores

double asterisks

double underscores
```

你可以隨便用你喜歡的樣式，唯一的限制是，你用什麼符號開啟標籤，就要用什麼符號結束。

強調也可以直接插在文字中間：

```md
un*frigging*believable
```

但是**如果你的 \* 和 _ 兩邊都有空白的話，它們就只會被當成普通的符號。**

如果要在文字前後直接插入普通的星號或底線，你可以用反斜線：

```md
\*this text is surrounded by literal asterisks\*
```

### 程式碼

如果要標記一小段行內程式碼，你可以用反引號把它包起來（`），例如：

```md
Use the `printf()` function.
```

會產生：

```md
Use the <code class=" prettyprint">printf()</code> function.
```

如果要在程式碼區段內插入反引號，你可以用多個反引號來開啟和結束程式碼區段：

```md
``There is a literal backtick (`) here.``
```

這段語法會產生：

```md
<code class=" prettyprint">There is a literal backtick (`) here.</code>
```

程式碼區段的起始和結束端都可以放入一個空白，起始端後面一個，結束端前面一個，這樣你就可以在區段的一開始就插入反引號：

```md
A single backtick in a code span: `` ` ``

A backtick-delimited string in a code span: `` `foo` ``
```

會產生：

```md
A single backtick in a code span: <code class=" prettyprint">`</code>

A backtick-delimited string in a code span: <code class=" prettyprint">`foo`</code>
```

在程式碼區段內，& 和方括號都會被自動地轉成 HTML 實體，這使得插入 HTML 原始碼變得很容易，Markdown 會把下面這段：

```md
Please don't use any `<blink>` tags.
```

轉為：

```md
Please don't use any <code class=" prettyprint"><blink></blink></code> tags.
```

你也可以這樣寫：

```md
`—` is the decimal-encoded equivalent of `—`.
```

以產生：

```md
<code class=" prettyprint">—</code> is the decimal-encoded
equivalent of <code class=" prettyprint">—</code>.
```

### 圖片

很明顯地，要在純文字應用中設計一個「自然」的語法來插入圖片是有一定難度的。

Markdown 使用一種和連結很相似的語法來標記圖片，同樣也允許兩種樣式： 行內式和參考式。

行內式的圖片語法看起來像是：

```md
![Alt text](/path/to/img.jpg)

![Alt text](/path/to/img.jpg "Optional title")
```

詳細敘述如下：

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

參考式的圖片語法則長得像這樣：

```md
![Alt text][id]
```

「id」是圖片參考的名稱，圖片參考的定義方式則和連結參考一樣：

```md
[id]: url/to/image  "Optional title attribute"
```

到目前為止， Markdown 還沒有辦法指定圖片的寬高，如果你需要的話，你可以使用普通的 <img alt="心中無塵，碼字入神（Markdown 已上線！）" width="640" height="360"> 標籤。

### 反斜槓

Markdown 可以利用反斜槓來插入一些在語法中有其它意義的符號，例如：如果你想要用星號加在文字旁邊的方式來做出強調效果（但不用 標籤），你可以在星號的前面加上反斜槓：

```md
\*literal asterisks\*
```

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

```md
\   反斜線
`   反引號
*   星號
_   底線
{}  花括號
[]  方括號
()  括弧
#   井字號
+   加號
-   減號
.   英文句點
!   驚歎號
```

### 自動連結

Markdown 支援以比較簡短的自動連結形式來處理網址和電子郵件信箱，只要是用方括號包起來， Markdown 就會自動把它轉成連結。一般網址的連結文字就和連結地址一樣，例如：

```md
<http:></http:>
```

Markdown 會轉為：

```md
<a href="http://example.com/" rel="nofollow">http://example.com/</a>
```

郵址的自動連結也很類似，只是 Markdown 會先做一個編碼轉換的過程，把文字字元轉成 16 進位碼的 HTML 實體，這樣的格式可以糊弄一些不好的郵址收集機器人，例如：

```md
<address>
```

Markdown 會轉成：

```md
<a href="mailto:addre%0D%0Ass@example.co%0D%0Am" rel="nofollow">address@exa
mple.com</a>
```

在瀏覽器裡面，這段字串（其實是 <a href="mailto:address@example.com" rel="nofollow">address@example.com</a>）會變成一個可以點選的「address@example.com」連結。

（這種作法雖然可以糊弄不少的機器人，但並不能全部擋下來，不過總比什麼都不做好些。不管怎樣，公開你的信箱終究會引來廣告信件的。）</address></blink>

心中無塵，碼字入神（Markdown 已上線！）

相關文章