2009年10月6日 星期二

使用 google-code-prettify

什麼是 google-code-prettify 呢?在它的網站上解釋得其實很簡潔、清楚:

syntax highlighting of code snippets in a web page

google-code-prettify 最吸引我的理由就是它簡單、易用,不但容易設定,在使用上也相對地非常方便,而且最方便的就是只要框住程式碼,並不需要告訴 google-code-prettify 那段程式碼是什麼語言,因為 google-code-prettify 會自動判斷。不過呢…它的一個小小缺點就是不會自動為程式碼加上行號。

那,怎麼設定使用 google-code-prettify 呢?

進入 Blogger 版面配置的「修改 HTML」裡,然後將以下這段加到 <head> 及 </head> 之間。

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

嘿!這裡用了點偷懶的方法,直接從 subversion 中取用 prettify.css 及 prettify.js 這兩個檔案。

接著找到 <body>,將它修改為 <body onload="prettyPrint()">。

儲存之後,當要張貼程式碼時,只要使用 <pre class="prettyprint"> </pre> 或 <code class="prettyprint"> </code> 框住整段程式碼就 OK 了。

延伸閱讀:

張貼留言