2008年10月24日

在網頁中嵌入顯示程式碼: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:程式碼顯示的美化工具


更多精選推薦文章