Thursday, February 05, 2009

[Blog] Google Code Prettify

  • Google Code Prettify
  • 之前就有考慮要syntax highlighter來輔助程式碼的顯示,但是總感覺loading太重,所以還是選擇用抓圖的形式來顯示程式碼。最近看到了Google Code Prettify感覺還算可以,有興趣的人可以用用看。

    官方頁面如下:

    http://code.google.com/p/google-code-prettify/

    安裝方式請參考下面的網頁:

    http://google-code-prettify.googlecode.com/svn/trunk/README.html

    當一切設定好之後,你會發現code的顏色的確有改變,但是總覺得有點不完善,這時你可以修改你的html範本,增加CSS Code如下:

    code {
    display: block;
    font-family: 'Verdana';
    font-size: 8pt;
    font-weight: bold;
    overflow: auto;
    white-space: nowrap;
    border: 1px solid #7F7F7F;
    padding: 10px 10px 10px 21px;
    max-height: 600px;
    line-height: 1.5em;
    letter-spacing: 0px;
    color: #000000;
    background: #fbfaf7 url(http://sites.google.com/site/xinyu0123/Home/BG_CODE.gif) left top repeat-y;
    }

    最後那個background設定目的是要在程式碼左邊顯示一條code的標籤,你可以不用加上它。儲存完範本之後,每當你使用code標籤貼上程式碼就會有如上的效果。

    PS. 每當我切換blog的撰寫模式之後,整個code的排版又被歸零,看來只能再尋找更好的方法,或者是哪天想不開自己用Flash寫好了。

    Web Color Code的部份可以參考下面的網頁:

    http://www.computerhope.com/htmcolor.htm

    http://html-color-codes.com/

    關於CSS語法部分可以參考下面的網站:

    http://www.w3schools.com/Css/

No comments:

Post a Comment