2018年11月17日 星期六

Markdown on Google blogger

用 Google blogger 用很久了,雖然一直覺得 Google blogger 很難用,但是又實在懶得換到其他家或是自己架 blog,最近無意間看到網路上有人分享在 blogger 上用 markdown 的方法,便想來試試看,因為一直有聽聞用 markdown 來寫 blog 是很方便的,希望用 markdown 能改善 google blogger 糟糕的使用體驗

要在 blogger 用 markdown 其實很簡單,主要概念是用 javascript 將使用 markdown 的文章內容抓出來,然後用網路上已經有人寫好的 javascript 函式庫 showdown 將 markdown 文章轉為 html 然後再更新回去,像我使用的 javascript 如下

  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js">
  2. </script>
  3. <script>
  4.  
  5. // The > will replaced to > when using innerHTML, so replace it back to >
  6. // for showdown to render blockquote
  7. function blockquote(str) {
  8. return str.replace(/\n>/g,'\n>') ;
  9. }
  10.  
  11. var converter = new showdown.Converter();
  12. var posts = document.querySelectorAll(".post-body");
  13. var s = "";
  14. Array.prototype.forEach.call(posts, function(el, i) {
  15. var idx = el.innerHTML.indexOf("markdown");
  16. if(idx != -1 && idx <= 1) {
  17. el.innerHTML = converter.makeHtml(blockquote(el.innerHTML).replace("markdown",""));
  18. var pres = el.querySelectorAll("pre");
  19. for (var i = 0; i < pres.length; i++) {
  20. pres[i].classList.add("prettyprint");
  21. pres[i].classList.add("linenums:1");
  22. }
  23. }
  24. });
  25. </script>
  26.  
  27. <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js">
  28. </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 在裡面就好了

1 則留言: