如何在Blogger使用Markdown

Markdown是一種輕量化的標記式語言，可用純文字的方式來達到修飾文字顯示方式的效果。目前以廣泛的被使用在書寫技術文件或是部落格文章等。但Blogger目前並不支援使用Markdown來寫文章，所以需要透過第三方的Plugin來達成所需要的效果。本部落格選擇cs905s所開發的md-in-blogger來達到快速編緝的效果。目前這個Plugin還是運作正常，如有發現問題，請到https://github.com/cs905s/md-in-blogger留言。 以下將介紹如何設定md-in-blooger:

1. 到Theme選項，點擊`CUSTOMISE`按鈕並選擇`Edit HTML`
2. 把下方的code貼到`</header>`的前面
```html
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css" rel="stylesheet"></link>
```
3. 把下方的code貼到`</html>`的前面
```html
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/showdown/1.6.2/showdown.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="//mxp22.surge.sh/markdown-highlight-in-blogger.js" type="text/javascript"></script>
```
4. 儲存設定

當上述的步驟完成後，就可以在Blogger的編緝器裡使用Markdown了。使用的方式為點擊工具列左上角的`<>`圖式，並選擇`HTML View`即可。由於編緝Markdown是在HTML模式下，`<`，`>`或是一些HTML的保留字則要用`&lt;`跟`&gt;`來表示。又`Compose view`沒有辨法顯示Markdown的效果，所以請用`Preview`功能來確認所打的文字或是圖片是否顯示正常。

之後僅需在文章開頭及結尾加上下列的標簽即可：
```html
<pre class="markdown">
</pre>
```

以下有些Markdown的使用範列及顯示結果：
# 這是標題

# 清單
- 清單 1
  - 清單 1-1
- 清單 2

# 列表
1. 項目 1
  1.1. 項目 1.1
  1.1. 項目 1.2
1. 項目 2

# 表格
|   置左   |   置中  |   置右   |
|:--------|:------:|---------:|
|(1,1)    | (1,2)  | (1,3)    |
|(2,1)    | (2,2)  | (2,3)    |

# Mermaid (未支援)
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```

# 後紀

雖然作者很久沒更新了，不過目前程式碼還算運作正常。


# 參考資料
-  [md-in-blogger](https://github.com/cs905s/md-in-blogger)