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,.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的問題。

11 則留言:

詹詹小 提到...

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

etrex kuo 提到...

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

nash 提到...

請問可以教一下要怎麼修改嗎?

想要用內建Contempo就好

etrex kuo 提到...

nash你好 我已修改程式碼,目前程式碼可以支援Contempo

nash 提到...

不好意思我測試還是沒有呢
是要在html下用md撰寫對吧?

etrex kuo 提到...

對的 而且要在文章的第一行寫 markdown
程式才會判斷這篇文章要使用markdown

nash 提到...

成功了!
謝謝!

回饋一下
還要把【顯示「 HTML/JavaScript 」】勾選才行

新版本blooger的功能

etrex kuo 提到...

感謝回饋~

nash 提到...

請問程式碼這一段
有辦法換主題嗎?
想要有行數&背景不要那麼深黑@@
有辦法引這邊的主題嗎?
https://jmblog.github.io/color-themes-for-google-code-prettify/
(私心想要Tranquil Heart)

etrex kuo 提到...

修改方法已回覆在文尾

徐志宏 提到...

好東西!感謝!