在網頁中嵌入顯示程式碼：HighLight 軟體

(2012.02.05更新)
全系列顯示效果比較已完成，可參考：
在網頁中嵌入顯示程式碼：全系列效果比較及教學整理，
選擇自己較想要的效果後再進入單篇文章看每種外掛的設定教學。

(2012.2.3重新編輯整理)
工作了將近三個月其實學到了非常多東西，
最近才突然發覺應該要好好做些記錄下來，
一方面可以讓自己回顧之前的成果，
一方面也可以把新學到的東西做些 memo，
這樣下次才不會找不到又得從頭摸起，
等 blog 內容充實後說不定也可以讓有相同問題的網友搜尋到解決之道 :p。

因為有了這樣的想法，
所以第一個產生的需求就是要將程式碼放到網頁上，
讓有相同問題的網友能藉由程式碼來了解怎麼解決問題，
否則只講解觀念大概還是很難讓以後的自己或是別人理解吧。

後來找到最讓我滿意的方法是用軟體來解決，
主要的原因是因為他的輸出可以選擇不同的 IDE 效果，
像我一直使用 eclipse，所以看到輸出同樣的效果就覺得很親切。
如果有使用其他的 IDE 也可以試試，應該也有 NetBean 等其他的顯示效果。

安裝這個軟體後便可以讀取程式碼把 code 轉換為 html 格式，
除了 html 外，也還可以轉成 LaTeX, SVG and BBCode 等，
若看得懂英文可以直接上官方網站看 manual：Highlight Code Converter，
不喜歡英文的話可以參考別人的教學：HighLight：程式碼顯示的美化工具。

下面是 Highlight Code Converter 這個軟體操作預覽圖：

HighLight這個程式十分簡便又很好用，
設定好輸出格式後再按 convert files 即可在設定的輸出資料夾看到html檔，
如果無法在 blog上嵌入 css 檔的話請勾選：
1. Enbed style in output 和 2. Inline CSS
再來只要把輸出的 html 以文字編輯器開啟，
複製全部後再到貼到部落格即可。

另外有個選項是 output as ordered list，
可以讓輸出程式碼時用 li 的 html tag顯示行號，
這麼做的好處是讀者在複製程式碼時不會複製到行號，
但在 firefox 和 chrome 中似乎得將＜/li＞ 刪去，
否則每行會多出一行空行，IE則能正確顯示。
若沒有勾選 output as ordered list，則都能正常顯示，
但複製時會連行號一起複製。

另外一般來說選取檔案後右側就可以看到預覽，
(但是我的有時候會不太正常無法顯示)
看到預覽後可以直接按下 Clipboard 把 html code 存在剪貼簿，
這時候不用再去編輯檔案和複製，可以直接在部落格貼上，
只是剪貼簿所貼上的code最後面有時似乎會少幾個碼，
所以可能要自己再檢查一下。

程式輸出的顯示效果會像下面這樣：

  1 public class StringIntPair{
  2 
  3     private String string;
  4     private int integer;
  5 
  6     public StringIntPair(String s, int i) {
  7         string = s;
  8         integer = i;
  9     }
 10 
 11     protected String getString() {
 12         return string;
 13     }
 14 
 15     protected int getInteger() {
 16         return integer;
 17     }
 18 
 19     public String toString() {
 20         return string + "\t" + integer;
 21     }
 22 }

關鍵字：程式碼, 顯示, 網頁, 文章, 內嵌, 嵌入, 放入, 部落格, blog, blogger, eclipse, ide,
參考資料：

1. HighLight：程式碼顯示的美化工具