在 blogger 貼漂亮 code 的方法（使用 markdown 和 prettyprint）在使用 < 符號時產生的問題

前情提要：http://etrex.blogspot.tw/2017/03/blogger-code-markdown-prettyprint.html

在使用 element.innerHTML 時，會將 < 字元轉換為 &lt; 再輸出

然後 markdown 再度把 &lt; 轉換為 &amp;lt;

所以最後顯示為 &lt;

為了解決這個問題，必須找到一個方法，去取得最原始的html

查了一下發現似乎無法簡單的達成。

https://stackoverflow.com/questions/15419209/getting-raw-text-content-of-html-element-with-html-uninterpreted

https://stackoverflow.com/questions/5998443/how-to-get-raw-html-from-string-in-jquery

結論：必須在取得innerHTML之後做一次html decode

但 html decode 的成本太高，可能只要處理< > &就好。

在前一篇文章裡 Jo 的留言中，提出的解法為：

<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.6.4/showdown.min.js"></script>
<script>
var converter = new showdown.Converter();
var posts = document.querySelectorAll(".post-body");
//定義要替換的字元
var insteadWords = {
    "&gt;": ">",
    "&lt;": "<",
    "&amp;": "&"
};
//loop每一篇文章
Array.prototype.forEach.call(posts, function(el, i){
  /*有在開頭找到 markdown 字眼才處理，把整個文章取出來替換成 html
   * 從文章取出內容時，應該有某些字元早就被轉換過，但因為是寫 markdown，根本不需要轉
   * 所以再寫一段程式把某些特定的字轉回來，暫時只定義了 3 組
   */
  if(el.innerHTML.indexOf("markdown") <= 1){
    var origin = el.innerHTML;
    origin = origin.replace("markdown","");
    for (var key in insteadWords){
        origin = origin.replace(new RegExp(key,'g'),insteadWords[key]);
    };
    //先把特殊字元轉回來再作 markdown 的轉換
    el.innerHTML = converter.makeHtml(origin);
  }
});

var pres = document.querySelectorAll("pre");
Array.prototype.forEach.call(pres, function(el, i){
  el.classList.add("prettyprint");
});
</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst"></script>