2017/3/8

在 blogger 貼漂亮 code 的方法(使用 markdown 和 prettyprint)

使用套件

markdown
prettyprint

安裝步驟

先到 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");
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語法的新文章
文章內容寫入如下圖:

結果看起來會是




2 則留言:

詹詹小 提到...

你好,照着你的方法试了好像没有成功。

etrex kuo 提到...

你好 我這方法適用於基本款的 blog 版面 如果你是用動態版的或者其他款式的話需要作些修改