有時在 Blog 的內容內，會有含程式碼的範例，若要讓其能正常顯示，一般是設定 html 的〈pre〉標籤。 不過呢，想當然其 format 樣式是不會好看的，若希望能如在 程式碼 IDE 編輯器上所顯示的那般，不同的關鍵字、不同的程式語言，就能顯示不同的顏色。甚至呢，還可以顯示出行號來。

有兩種方法，可以讓網頁的程式碼片段(code snippets)內容，顯示出行號與關鍵字顏色等比較看起來像是真的在看程式碼的內容般。 一種是在 Client 端能解析網頁內程式碼的內容。 最具知名度的應該是這個吧： Syntax highlighter。它是 Javascript 的程式，是伴隨著網頁內容一同下載到 Browser 端，再由其編譯器來解析。 這種方法好處是很方便，不用更改到 server 端的設定，就是只要在網頁的 header 區貼上該段程式碼即可。 而主要的缺點就是要多下載約快 200k 的 javascript 程式，耗費傳輸頻寬，也稍微增加了 Browser 端的解析負擔，還有呢，也會與所使用的 Browser 各種版本所使用的 javascript 編譯器有關，使得解析出來的結果，在各種瀏覽器所看到顯示結果的會不太一樣。

另外一種方式就是在 server 端，也就是在 Blog 平台上，安裝 “code lightlight” 解析器的 plugin。 然後當 blog 文章要輸出時，整個網頁內容會在 server 端這邊作一個完整的解析。這個過程應該是稱之為 “Text Rendering”。 好處就是網頁內容在傳輸輸出前，就已經處理過，並轉為完整 HTML (XHTML) 格式的網頁。 但是缺點就是，必須在 server 端上設定安裝，而這與各個平台版本是否有支援這類的 plugin 機制是有關係的。

我傾向後者的方式，主要的原因是我的 Blog 內容，在每一個頁面(page)，並不會常出現程式碼的片段內容； 再則，我總覺得從 server-side “空降” 一個 javascript 的解析器，有說不出的彆扭感，且每次傳輸要多上近 200K，實在覺得說不過去。

所以，決定後，我的方向就是轉向尋找 b2evolution 有無支援 “code hightlight” 的 plugin 模組。 原來官方版本就有提供一個預設的了，但是蠻陽春的，好像只支援 php 與 html 的程式碼顯示而已。 還好的一點是，在官方網站上有看到其中一位國外網友改寫了這個陽春的模組，將其解析的核心改為 GeSHI。 這太棒了！ 這個 GeSHI 解析器(php-based)，可以解析的程式語言可是高達上百種，而且還在持續的維護更版中。

這個網友改寫的模組在這裡： b2evolution code highlighter plugin modded to use GeSHi。 安裝超級容易，就是依照該網站的安裝提示，下載該網站所提供的 plugin 模組，以及最新版本的 GeSHI 程式，再一同解壓縮至 “blogroot/plugins/code_highlight_plugin/” 目錄即可，然後在 Blog 個管理平台啟動該模組就可以了。

爾後在編輯文章內容時，只要在程式碼片段內容的上下文，加上如下的語法即可：

Syntax
<(codespan|codeblock) lang="[language]" line="[starting line]" highlight="[highlight list]">[code]

• codespan|codeblock: codespan is usually used when you want to highlight code inline while codeblock breaks off a new body and highlights the code (similar to the span tag v.s. the div tag). Note that the codespan tag doesn’t list line numbers.
• lang: specifies the language used. Note that not specifying this or specifying an unavailable language will result in the code not being highlighted (though it will still be formatted).
• line: specifies where the line numbering will start for the codeblock. By default, this is 1.
• highlight: a comma-separated list of lines to be highlighted (e.g. highlight=”1,3,4″).

底下是先前我曾寫過的一支 java 程式碼，加了上述標籤後所顯示的程式碼內容如下：

import java.util.*;

public class CoRAppMain {
	public static void main(String[] args) {
		
		Random _rand = new Random();
		TroubleMaker _troubler = new TroubleMaker("敗家子");
		Trouble[] t = new Trouble[18];
		
		//由亂數來模擬製造麻煩的等級，從 0~3。
		for (int i=0;i<t.length;i++){	
			switch(_rand.nextInt(4)) {
			  case 0: t[i] = new Trouble("SMALL"); break;
			  case 1: t[i] = new Trouble("MEDIUM"); break;
			  case 2: t[i] = new Trouble("BIG"); break;
			  default: ;
			}
		}
		
		//新增四個麻煩的處理者
		TroubleHandler _small  = new SmallTrouble_Handler("小二子");
		TroubleHandler _medium = new MediumTrouble_Handler("中三郎");
		TroubleHandler _big    = new BigTrouble_Handler("大哥大");
		
		//串鍊(chain)所有麻煩的處理者
		_small.setSuccessor(_medium);
		_medium.setSuccessor(_big);
		_big.setSuccessor(_nobody);
		
		for (int j=0;j<t.length;j++){
			System.out.print(_troubler.getName() + "所製造的麻煩[" + (j+1) + "]: ");
			_small.handleTrouble((Trouble)t[j]);
		}
	}
}

該程式碼的外框 layout 是可以透過 css 來調整的，檔案是位在該 plugin 目錄下的 amcode.css。 像原來預設的 code block 樣式是每一個表格欄位都有框線，實在難看，我就把它改掉，呈現如上的樣式。 另外，數字的顏色就需要透過編輯該目錄下的子目錄 img/numbers.gif ，預設是高亮綠色，我是把它給改為暗灰色。

樣式看來仍是與 Syntax highlighter 有差。再看看吧，有空的時候再來給改個 css 樣式檔，甚至可能連 plugin 內的程式都要給 “hack” 修改一番，才能達到更具美感的程式碼顯示。