在網頁中顯示程式碼 codeblock + Google Code Prettify

2012年2月7日 星期二

在網頁中顯示程式碼 codeblock + Google Code Prettify


在網頁中顯示程式碼,常常是最頭痛的問題,看到很多人有漂亮的程式碼區塊,也弄一個來玩。



使用Code Block,並且利用 Google Code Prettify 將文章中的程式碼語法上色美化。

安裝 Code Block:

在 Blogger 樣板中加入以下CSS :

建議在 「.post {」附近,比較好管理。

.post .codeblock { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 10pt; overflow:auto; background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; max-height:1000px; line-height: 1.2em; }


background 中有個圖片的連結,可把圖檔下載後放到自己的網路空間。
max-height 是指這個區塊最高能到多高,如果超過的話就會在右方顯示 scroll bar。

安裝  Google Code Prettify:

在 blogger template 中的 <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>

搜尋<body並改為:

<body onload='prettyPrint();'>

之後把想要顯示的程式碼用<pre class="codeblock prettyprint">   </pre>包起來,比如:

<pre class="prettyprint">
public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello, world!");
  }
}
</pre>

這樣就可以已有這樣的效果了。
public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello, world!");
  }
}

在撰寫程式的過程中,因為一些特殊符號的關係,可以用HTML Encoder轉換編碼。