有的時候我覺得我不會 Markdown
前言
在 《一篇帶你用 VuePress + Github Pages 搭建博客》[1] 中，我們使用 VuePress 搭建了一個博客，最終的效果查看：TypeScript 中文文檔 [2]。
在優化博客的過程中，因爲需要寫 markdown-it 插件，翻了下 markdown 的 CommonMark Spec[3]，突然發現對 Markdown 還遠不夠了解：
軟換行（Soft line breaks）
換行符不在行內代碼或 HTML 標籤內，前面沒有兩個或以上的空格，將解析爲軟換行（Soft line breaks）。渲染爲 HTML 時是一個行結束符或空格。
輸入：
foo
baz輸出：
<p>foo
baz</p>表現：
硬換行（Hard line breaks）
換行符不在內聯代碼或 HTML 標籤內，前面有兩個或多個的空格，並且不在塊的末尾， 將解析爲硬換行（Hard line breaks） ，渲染爲 HTML 時是一個<br /> 標籤。
輸入（注意 foo 後面有兩個空格）：
foo
baz輸出：
<p>foo
baz</p>表現：
反斜槓（backslash）
除了用於轉義，在行尾的反斜槓相當於硬換行：
輸入：
foo\
bar輸出：
<p>foo
bar</p>行內代碼（code span）
我們通常會用一對反引號包裹字符串，表示行內代碼（code span）：
輸入：
`foo`輸出：
<p><code>foo</code></p>表現：
但其實行內代碼只要求內聯代碼以反引號串開始，以同樣長度的反引號串結束。
所以用多個反引號也是可以的：
```foo```輸出：
<p><code>foo</code></p>圍欄式代碼塊（Fenced code blocks）
如果你使用了至少三個連續的反引號，並且添加了換行，就會變成圍欄式代碼塊：
foo
輸出：
<pre><code>foo
</code></pre>表現：
如同行內代碼，不要求必須三個反引號，只要至少三個並且前後相同就行，所以當我們想在代碼塊中使用三個反引號時，你可以使用四個反引號包裹：
foo
```
表現爲：
不使用反引號，使用波浪號也是可以的，但不能混用：
```
~~~
foo
~~~
```
輸出：
```
<pre><code>foo
</code></pre>
```
縮進式代碼塊（Indented code blocks）
----------------------------
縮進式代碼塊由空行隔開的數個**縮進塊**組成。
**縮進塊**是數個非空行，**每行縮進四個或多個空格**。
舉例一個縮進塊：
```
a simple
indented code block
```
輸出：
```
<pre><code>a simple
indented code block
</code></pre>
```
表現：
舉例由空行隔開的數個縮進塊：
```
chunk1
chunk2
chunk3
```
輸出：
```
<pre><code>chunk1
chunk2
chunk3
</code></pre>
```
三個縮進塊共同組成了縮進式代碼塊。
表現：
鏈接引用定義（Link reference definitions）
----------------------------------
鏈接引用定義由鏈接標籤、冒號 (:)、可選的空白、鏈接目標、可選的空白及可選的鏈接標題組成。舉個例子：
```
[foo]: /url "title"
```
但這只是一個定義，並不會有任何展示，就像我們在 JavaScript 中聲明瞭一個變量一樣，如果我們要使用它：
```
[foo]
```
輸出：
```
<p><a href="/url" title="title">foo</a></p>
```
鏈接引用定義不對應於某個結構元素。實際上它定義了一個標籤，以用於在文檔其它地方的引用鏈接及引用類型圖像。它可以出現在引用鏈接的前面或後面。
當在圖片中使用鏈接引用定義時：
```
![foo][bar]
[bar]: /url
```
輸出：
```
<p><img src="/url" alt="foo" /></p>
```
自動鏈接（Autolinks）
---------------
自動鏈接是由尖括號 (<...>) 包裹的絕對 URI 與 email 地址。它將解析爲鏈接，以 URL 或 email 地址作爲鏈接標籤。
```
<http://foo.bar.baz>
```
相當於：
```
[http://foo.bar.baz](http://foo.bar.baz "http://foo.bar.baz")
```
輸出爲：
```
<p><a href="http://foo.bar.baz">http://foo.bar.baz</a></p>
```
Setext 式標題（Setext headings）
---------------------------
Setext 是一種輕量級標記語言，用於格式化純文本文檔，例如電子通訊，Usenet 帖子和電子郵件。與其他一些標記語言相比，該標記易於閱讀，而無需任何解析或特殊軟件。
Markdown 同樣提供了類似的語法：
```
Foo *bar*
=========
Foo *bar*
---------
```
輸出：
```
<h1>Foo <em>bar</em></h1>
<h2>Foo <em>bar</em></h2>
```
使用 `=`則是第一級標題，使用`-`字符則是第二級標題。底線長度任意。
水平線（Thematic breaks）
--------------------
由 0-3 個空格的縮進及三或多個 `-`,`_`, `*` 字符組成的行，形成水平線。
輸入：
```
***
---
___
```
輸出：
```
<hr />
<hr />
<hr />
```
表現：
參考資料
----
[1]
《一篇帶你用 VuePress + Github Pages 搭建博客》: _https://github.com/mqyqingfeng/Blog/issues/235_
[2]
TypeScript 中文文檔: _http://ts.yayujs.com/_
[3]
CommonMark Spec: _https://spec.commonmark.org/0.30/#hard-line-breaks_本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/bPAiClhVTL5xvWf4mfLFOw