如何在Blogger內幫程式碼上色

像這樣美美的Code大家都愛

#include <stdio.h>

int main() {
    printf("Hello, %s", "Inndy");
}

問題是到底要怎麼做呢？

我使用的是Google開發的 google-code-prettify 這個JavaScript Library
還好Blogger很好心的提供了自訂HTML Template的功能

所以我們可以在裡面塞自己的JavaScript / CSS進去，當然如果你想塞在文章內也可以 XD
主要的 Code 在 http://google-code-prettify.googlecode.com/svn/trunk/src/
而且有提供幾種 Style http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html
我用的 Style 是從 Doxy 這款，再稍微小修改

廢話不說了，我們來動手吧



【範本】 -> 【編輯 HTML】

點圖放大

像這樣把 Code 放進去就好了，放在 </head> 之前

Code如下：

<!-- START "google-code-prettify" -->
<link href='//google-code-prettify.googlecode.com/svn/trunk/styles/doxy.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js'></script>
<script type='text/javascript' src='//pastebin.com/raw.php?i=LK1n54KZ'></script>
<script type='text/javascript'>window.addEventListener('DOMContentLoaded', prettyPrint);</script>
<!-- END "google-code-prettify" -->

要在文章內放 Code 的時候用的HTML語法（記得escape html，或者先建立好 pre 這個 tag 再把 Code 從撰寫模式丟進去）：

<pre class="prettyprint">Code放這裡</pre>

或者是

<code class="prettyprint">Code放這裡</code>

兩種都可以，最後提供一個懶人大法，把倒數第二行的

<script type='text/javascript'>window.addEventListener('DOMContentLoaded', prettyPrint);</script>

換成

<script type="text/javascript">
    window.addEventListener('DOMContentLoaded', function () {
        Array.slice(document.querySelectorAll("blockquote")).forEach(function (e) { e.outerHTML = unescape('%3Cpre%20class%3D%22prettyprint%22%3E') + e.innerHTML + unescape('%3C/pre%3E'); });
        prettyPrint();
    });
</script>

就可以自動把 Blogger 的 "引用" 變成 Code Style 了
（<blockquote></blockquote> -> <pre class="prettyprint"></pre>）

關於 google-code-prettify 更詳細的說明請看官方文件吧！
（附上官方README.html：http://google-code-prettify.googlecode.com/svn/trunk/README.html）