代碼發芽網 § 程式碼標亮的最佳工具,免插件外掛


在一些教學文章中,難免需要用一些語法來說明,如果將語法漂亮的呈現在文章中,那麼不管在解說或者是閱讀上,都會有比較好的效果,傳達意念上也較為容易,而為了達到這個目的,比較常用的方式是標亮語法,例如之前介紹過的PastieAdvanced Syntax HighlightingSyntax Highlighting,當然我們也可以用Javascript的方式來載入,但缺點是太浪費流量了,因為不是每一篇文章都需要用到這些Javascript,所以我目前的習慣還是以最簡單的方法來進行,利用基本的HTML語法來標亮即可,而這次要介紹的「代碼發芽網」,我個人覺得相當的不錯,它支援了230多種的語法、30多種流行的主題,還可設定背景色、字型,如果註冊會員的話可以進行管理的動作,但我覺得最方便的是它支援顯示行號,這樣在文章中要做語法說明時就會相當的方便,而且它所產生的標亮語法在各大部落格或論壇中都可以呈現的很好,很值得加入收藏。

網址:代碼發芽網

【使用教學】

首頁是做一些特色的介紹,可以直接點擊「現在就試試看」的按鈕進入

接著就可以:

  1. 貼上要高亮化的語法
  2. 選擇這些代碼是哪一種語法
  3. 輸入驗証碼
  4. 最後按「代碼高亮」來產生即可

再來便可以看到產生後的預覽結果,此時我們可以進一步的切換背景色、套用主題或者指定字型等等,最重要的是可以啟用或關閉行號,待全部設定好之後,就可以用一鍵複制的功能,來複製高亮後的語法,例如我想將這些語法放在網誌上,只要點擊一下「HTML」之後,就可以得到語法。註:在套用主題時,若發現顏色沒有立即變化,請等待幾秒鐘即可

最後將高亮的語法貼到文章中就行囉

以下就是實際測試,含行號喔:(行號有助於說明,但讀者拷貝時也會一拼複製,這就要看自己的取捨了)

1 public class HelloWorld {
2
3     public static void main(String[] args) {
4         System.out.println(“Hello, World”);
5     }
6
7 }

另外,有一些符號若轉換出來有問題,代表你可能轉換語言選錯了,若以WordPress或Blogger來說的話,建議選擇「Javascript」