2013/09/29

如何在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

1 則留言:

網誌存檔