2009年8月24日 星期一

替blogger加入張貼程式碼的功能

研究了一天,總算把這個功能加入到blogger裡了!
而且理論上這個方法也可以用到一般的網頁上面,
不用像舊有的方法,需要至別的網頁把程式碼先parse成HTML語法在張貼到網頁上。
可以看看下面的範例,在讀取網頁時會透過syntaxhighlighter2.0自動轉換色彩。


這是一個C#語法:
using System.XML;
int a = 10;
string str = "這是一個C#的範例";

作法記錄如下:
  1. 先至SyntaxHighLighter官方網站下載最新版本的code
  2. 將壓縮檔案內的scripts目錄及styles內的所有檔案放到網路空間
    (研究室網頁已經有放,目錄為/support/syntaxhighlighter/)
  3. 將下列code張貼到網頁的header裡面。
    不過有網站是要求要將blogger內CSS的所有和code相關CSS移除。
    我的作法則是參考這個網站,將下列程式碼放在的後面。
    總而言之,應該兩種方法都可以。
    另外,下面程式碼裡面的yoursite是放第二步的檔案的網址。

    < link type="text/css" rel="stylesheet" href="yoursite/shCore.css"/>
    < link type="text/css" rel="stylesheet" href="yoursite/shThemeDefault.css" id="shTheme"/>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  4. 之後,各種要張貼程式碼的區塊,就把它改寫成這樣即可。
    < pre class="brush: 程式語法;">程式碼< /pre>

    如下面這樣:

    this is a test

1 則留言:

  1. SyntaxHighlighter已經在11月初更新至最新的2.1版本。
    有支援blogger,所以要如上面文章,加入SyntaxHighlighter.config.bloggerMode = true。
    不過目前不知道有什麼用處?

    另外,上述程式碼,我目前是把它加入在< body >之後,就可以正常執行了!

    回覆刪除