Google Code Prettify

Google Code Prettify

    身為一個資訊工程系的學生,想要分享讓自己
驕傲的程式碼也是一件理所當然的事情。當然、此
時,網路就成了一個很好的平台,諸如自己的Blog
或是網站(似乎大家都用Blog 了吧?!)。

    既然想要分享,當然就不能傷大家的眼睛,美美
的程式碼總是會比較多人想看。就象路上美美的正妹
一樣!!
    此時,Google Code Prettify 就發揮了用處,正
所謂「沒有醜女人,只有懶女人」(雖然我不覺得完成
正確)。但是適當的裝伴門面總是重要的。那麼如何使
用Google Code Prettify呢?

    Google Codr Prettify 看名子就知道是Google開發
它包含了兩個東西
    prettify.css 和 prettify.js

    prettify.js是修改程式碼加入一些html tag
  而prettify.css 就是呈現那些被html tag 包住的程
  式碼樣式。

  而使用時,先去Google Code 將這個壓縮檔抓下來
  並在網頁開頭引入

  <link href="prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="prettify.js"></script>
 
  如果是單獨呈現的網頁的話
  則在body 內加上 onload="prettyPrint()"
  那麼js就會開始修改程式碼加入html tag

  接著將要呈現的程式碼

  ------------------------------
  <pre class=”prettyprint”>
  public static void main(String args[]){

     Scanner keyin=new Scanner(System.in);
     System.out.println("Please Input a Number");
     int x=keyin.nextInt();
  }
  </pre>
 
 前後加上pre標籤即可。
 
 目前這個package可以自行判斷c、java、梅老大最愛的
 Python、SQL、HTML、XML、CSS、Ruby、PHP..等
 瀏覽器的部份目前主要的也都能支援

 但是其實並不是每個人都會單獨一個頁面只做顯示程式
 碼這件事情,所以用body onload 是非常沒有彈性的
 所以如果象在Blogger內要加入的話
 建議使用Widget方式加入,不要直接修改模版
 直接在
 
 javascript/html 區塊中寫入

 <script>prettyPrint();</script>

 這樣要加入其它的js也比較有彈性一點
 另外,這個code hilighter 有個缺點
 就是google 是用關鍵字判斷程式碼是那一種程式語言
 (有興趣者自己去看原始檔)
 因此效率不算是太好,不過樣式還算能接受
 

 reference
   http://ressol.blogspot.com/2007/09/code-pretty.html
   http://genewince.blogspot.com/2008/05/google-google-code-prettify.html
   http://punk.tw/2007/08/20/182.html
   http://iamkevintsai.blogspot.com/2007/11/code-pretty.html

 

回應

所以這東西的功能是可以在網頁上放程式碼時自動縮排囉!?

感覺起來不錯欸,不然都要空白空半天有時候顯示出來還是亂七八糟

所以這東西的功能是可以在網頁上放程式碼時自動縮排囉!?

感覺起來不錯欸,不然都要空白空半天有時候顯示出來還是亂七八糟

呵呵 看來是遊戲玩太多了 連"懶人包"名字都出現了

不過不知道他編排出來的格式是否我會喜歡?

以及他所可以判斷的語言正確性