blogger plus google-code-prettify = code block hightlight

poster： MarlboroMoo on 11:16
tag： , ,
為了 blogger 的 code block hightlight 搞了好幾天, 先後試了 SyntaxHighlighter 和 google-code-prettify , 最後決定用後者, 因為 SyntaxHighlighter 的 js 實在太多了, blogger 打開的速度慢的嚇人, 雖然有很多方便的功能(toolbar), 且有不同的 theme 可以選擇, 不過為了效能, 還是算了吧 :( . 下列做一些安裝筆記.
  1. 先下載 google-code-prettify , 將壓縮檔解開目錄下的 /src 都上傳到你的網頁空間(推薦 hostse.com).
  2. 修改 blogger teamplate(版面配置 > 修改 HTML), 找到 <head> 於下方加入以下的 code.
    3. <!-- google prettify -->
    <link href='http://你的網頁空間網址/prettify.css' rel='stylesheet' type='text/css'/>
    <script src='http://你的網頁空間網址/prettify.js' type='text/javascript'/>
  3. 再找到 <body>, 將它修改成下方的 code.
    4. <!-- load google prettify -->
    <body onload='prettyPrint()'>
  4. 自訂 css 給 <code> tag 用.
    5. /* CSS for Code Block and Cmd Block in content */
    code {
    display: block; /* fixes a strange ie margin bug */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    font: normal normal 100% Verdana, Arial, Sans-serif;
    font-size: 10pt;
    color:#000000;
    overflow:auto;
    background: #fbfaf7 url('http://你的網頁空間網址/Code_BG.gif') left top repeat-y;
    border: 1px solid #000000;
    padding: 10px 5px 10px 20px;
    margin: 5px 15px 5px 15px;
    max-height:250px;
    height: expression(this.offsetHeight>205?205:''); /*fix for IE without max-height*/
    line-height: 1.2em;
    text-decoration: none;
    }

    code.cmd {
    color:#ffffff;
    background: #000000 url('http://你的網頁空間網址/BG_CMD.gif') left top repeat-y;
    border: 1px solid #ffffff;
    }
  5. <code> tag 使用方式如下, 以後就有 hightlight 啦, ohya.
    6. <code class="prettyprint">
    你的 code.
    </code>
    <code class="cmd">
    你的 command.
    </code>

p.s 一些字元還是需要手動轉換的, like < > & " , 就用 Text -> HTML Entities Encoder 吧.
ref: this, this, this, and this.
       

0 comments:

張貼留言