Markdown on Google blogger

markdown 用 Google blogger 用很久了，雖然一直覺得 Google blogger 很難用，但是又實在懶得換到其他家或是自己架 blog，最近無意間看到[網路](http://etrex.blogspot.com/2017/03/blogger-code-markdown-prettyprint.html)上有人分享在 blogger 上用 markdown 的方法，便想來試試看，因為一直有聽聞用 markdown 來寫 blog 是很方便的，希望用 markdown 能改善 google blogger 糟糕的使用體驗 要在 blogger 用 markdown 其實很簡單，主要概念是用 javascript 將使用 markdown 的文章內容抓出來，然後用網路上已經有人寫好的 javascript 函式庫 [showdown](https://github.com/showdownjs/showdown) 將 markdown 文章轉為 html 然後再更新回去，像我使用的 javascript 如下

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
</script>
<script>

// The > will replaced to > when using innerHTML, so replace it back to >
// for showdown to render blockquote
function blockquote(str) {
    return str.replace(/\n>/g,'\n>') ;
}

var converter = new showdown.Converter();
var posts = document.querySelectorAll(".post-body");
var s = "";
Array.prototype.forEach.call(posts, function(el, i) {
    var idx = el.innerHTML.indexOf("markdown");
    if(idx != -1 && idx <= 1) {
        el.innerHTML = converter.makeHtml(blockquote(el.innerHTML).replace("markdown",""));
        var pres = el.querySelectorAll("pre");
        for (var i = 0; i < pres.length; i++) {
            pres[i].classList.add("prettyprint");
            pres[i].classList.add("linenums:1");
        }
    }
});
</script>

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
</script>

程式相當簡單，不言自明，接著在寫 blog 時只需要注意兩件事 * 在要用 markdown 編寫的文章最開頭放一行 markdown 字串讓 script 知道這一篇文章是用 markdown 寫的，需要做轉換 * 編寫文章時要用 HTML 的模式編寫 上面的程式碼區塊除了 markdown 的轉換之外，也引用了 Google 的 prettify 函式庫來做程式碼的上色 關於程式碼上色的寫法其實跟用 markdwon 之前完全一樣，markdown 有一個好處是他跟 html 相容，你可以直接在 markdown 文件中寫 html 內容，markdown 轉換時不會去動到 html 內容的東西 比較可惜的是若程式碼內有用到角括號，還是要先將角括號轉換成 &lt; 和 &gt; 才能將角括號與角括號內的文字正確顯示出來 若是沒有用 &lt; &gt; 這類跳脫字元直接用 < > 的話，在使用 innerHTML 會被當成是 html tag 並且將角括號內的文字轉成小寫，因為 html 先天就是 case insensitive，各家瀏覽器實作時都將 innerHTML 中的 tag name 轉為小寫 這篇文章就是用 markdown 寫的，使用的感想是寫文時真的舒服多了，markdown 的一個最大優點是它很純粹，很乾淨，沒有要做的包山包海複雜化而是用一些簡單的符號做出連結、標題、段落等效果，寫 blog 其實就只需要這些功能而已，如果真的 markdown 有做不到的部分，大不了直接寫 html 在裡面就好了