使用 Markdown 語法來撰寫 Blogger

最近發現自己使用 Markdown 來撰寫文件的次數越來越頻繁，就有了乾脆自己的 Blogger 也用 Markdown 來寫的念頭，順便也當作一種練習，於是就上網查了一下，發現蠻多人已經開始這麼幹了，所以參考了一些網路前輩的分享然後自己再稍微整理一下，在此做個紀錄順便分享給其它有需要的人。

首先，先到選單 **版面配置** 裡新增一個小工具如下圖所示  標題打上 Markdown 後，貼上以下程式碼 ```javascript <script src="https://cdn.jsdelivr.net/gh/google/code-prettify/loader/run_prettify.js"></script> <script> function blockquote(str) { return str.replace(/&_lt;/g,'<').replace(/&_gt;/g,'>').replace(/&_amp;/g,'&'); //Decode string of `&_lt;`, `&_gt;` and `&_amp;` at some case } var converter = new showdown.Converter(); var posts = document.querySelectorAll(".markdown"); Array.prototype.forEach.call(posts, function(el, i) { el.style.display = 'inline'; el.innerHTML = converter.makeHtml(blockquote(el.innerHTML)); var pres = el.querySelectorAll("pre"); for(var i = 0; i < pres.length; i++) { pres[i].classList.add("prettyprint"); pres[i].style.cssText = "border-width: 0.1em 0.1em 0.1em 0.1em; border: solid gray; overflow: auto; padding: 0.2em 0.6em;word-break:normal;word-wrap: normal;"; } /* 給予外部連結另開視窗的屬性 */ var hyperlinks = el.querySelectorAll("a"); for(var i = 0; i < hyperlinks.length; i++) { if(!hyperlinks[i].href.startsWith(window.location.href)) hyperlinks[i].target = "_blank"; } }); </script> ``` 接著到 **主題->自訂->進階->新增CSS**，如下圖  然後加上給 Markdown 用的 CSS 語法(可自行修改樣式內容) ```css /*Markdown 一般字體格式*/ .markdown > p { font-family:sans-serif; font-size: large; line-height: 1.4; } .markdown > p code { background-color: rgba(27,31,35,.05); border-radius: 3px; font-family:sans-serif; font-size: large; margin: 0; padding: .2em .4em; } .markdown > p > img { display: block; margin: 0 auto; width:80%; } ``` 到此已經完成大部分的前置作業，最後就是讓 Blogger 可以識別文章哪些內容需要轉換成 Markdown，先新增一篇文章將撰寫方式更改為 HTML  然後再將以下內容貼到編輯區，即可開始在我們自己的 Blogger 上用 Markdown 來編寫內容了 ```html

/* 預覽區文字內容 */

/* 閱讀更多 */

/* Markdown 內容 */


##參考資料 [\[Google\] Google 首頁](https://www.google.com) [\[Markdown\] Markdown 語法](https://markdown.tw)

``` ***- 預覽圖片連結位址：選填，如果使用了會在編輯文章的列表或手機版文章列表看到該圖片*** **- 預覽區文字內容: 填寫首頁每篇文章的簡介內容** **- 閱讀更多: 預覽區和文章內容的分隔線** **- Markdown 內容: 可以使用 Markdown 語法編寫的區域**
**P.S. 有些情況下，Markdown 內容裡的 < 、> 符號會無法正常被解析，目前 Workaround 的解法是將不正常地方的 < 、> 紛紛替換成 `&_lt;` 和 `&_gt;` 來解決**


##參考資料 [\[Markdown\] Markdown 語法](https://markdown.tw) [\[Github\] Supported languages of Markdown code blocks](https://github.com/highlightjs/highlight.js/blob/master/SUPPORTED_LANGUAGES.md) [\[Github\] Code-Prettify](https://github.com/googlearchive/code-prettify) [\[Github\] Showdown](https://github.com/showdownjs/showdown)