前情提要:
http://etrex.blogspot.tw/2017/03/blogger-code-markdown-prettyprint.html
在使用 element.innerHTML 時,會將 < 字元轉換為 < 再輸出
然後 markdown 再度把 < 轉換為 &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 = {
">": ">",
"<": "<",
"&": "&"
};
//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>