2010年3月17日 星期三

blogger 使用 google-code-prettify

1.先下載 google-code-prettify
http://code.google.com/p/google-code-prettify/
將壓縮檔中 src 目錄全都上傳到你的網頁空間


2.在你的 HTML <head>..</head> 中加入

<!-- google-code-prettify -->
<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>


prettify.css 和 prettify.js 請使用自已的網頁空間, 若無則用例中路徑



3.將 <body> 改為

<!-- google-code-prettify -->
<body onload='prettyPrint()'>

4.更改 stylesheet 設定你想要的顏色


將程式碼放在 <pre class="prettyprint">...</pre> 或 <code class="prettyprint">...</code> 之中


特殊字元記得使用替代符號


 < → &lt;
 > → &gt;
 & → &amp;

當然, 可以把 Blogger 的撰寫設定設為 "按照字面顥示 HTML"
不過也可以使用以下幾個 Html 語法轉換器
centricle
Postable
台大資訊工程系

如果想要更華麗的可以考慮使用 SyntaxHighlighter


參考
http://google-code-prettify.googlecode.com/svn/trunk/README.html
http://marlboromoo.blogspot.com/2009/05/blogger-plus-google-code-prettify-code.html
http://yuanfarn.blogspot.com/2009/10/google-code-prettify.html

沒有留言:

張貼留言