使用套件
markdownprettyprint
安裝步驟
先到 blogger 版面配置，在最下方找到新增小工具
然後選擇HTML/JavaScript
然後在內容填入以下程式碼
<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,.snippet-item");
Array.prototype.forEach.call(posts, function(el, i){
if(el.innerHTML.indexOf("markdown") <= 1){
el.innerHTML = converter.makeHtml(el.innerHTML.replace("markdown",""));
}
});
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>
就完工了。
測試
接著發佈一篇使用markdown語法的新文章文章內容寫入如下圖：
結果看起來會是
補充
使用Tranquil Heart theme 的 code 寫法為：<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");
Array.prototype.forEach.call(posts, function(el, i){
if(el.innerHTML.indexOf("markdown") <= 1){
el.innerHTML = converter.makeHtml(el.innerHTML.replace("markdown",""));
}
});
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"></script>
<link rel="stylesheet" type="text/css" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tranquil-heart.min.css" />
可以成功，但一行程式碼太長時會破版，應該是這個theme的問題。
