2008年11月14日 星期五

讓SyntaxHighlighter幫你網誌內的程式碼上色

寫程式又上網google的人,應該常常看到很多網頁或是blog,都會把code依文法上色,或是設計一些css來表現出程式碼的部份。

也有不少線上高亮度語法的服務,讓你貼上原始碼,選好程式語言,就做好html碼給使用者。或是給一段script,在網頁內直接即時產生出code。

今天介紹的是是只要將下載回來的script檔,找個空間放好,再修改一下自己網誌的樣本檔,然後每次要發佈程式碼時,加上對應的name跟class即可。

因為我個人希望的要求是:

  • 在撰寫文章時不會太麻煩,可以直接用簡單的<pre>來區分貼上的程式碼,不用每次都要另外找線上服務來轉html。
  • 文章從RSS發佈出去,能看到正常的內容即可。像一些用script即時產生方式就不適合,在rss裡面就看不到程式碼。

剛剛把工具設定好了,這邊分享一下我的經驗。

  1. 下載SyntaxHighlighter_1.5.1.rar,然後讀一下Usage
  2. 把下載回來的檔案解壓出來,將裡面Scripts目錄下面的所有檔案,都傳到自己固定的網路空間,這邊我是使用Google Pages。(其實js傳自己會用到的語法就可以。)
  3. 將下面這一段,貼到你的網誌樣本檔的header裡面。
    <link href='http://nio127.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
    <script src='http://nio127.googlepages.com/shCore.js' type='text/javascript'/>
    <script src='http://nio127.googlepages.com/shBrushCss.js' type='text/javascript'/>
    <script src='http://nio127.googlepages.com/shBrushXml.js' type='text/javascript'/>
    <script src='http://nio127.googlepages.com/shBrushPython.js' type='text/javascript'/>
    <script src='http://nio127.googlepages.com/shBrushCSharp.js' type='text/javascript'/>
    <script src='http://nio127.googlepages.com/shBrushJScript.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(function() {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://nio127.googlepages.com/clipboard.swf';
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
    });
    

    這邊除了shCore.js之外,其他就看個人需求來加了。src那個後面改成自己的空間。

  4. 到這邊設定就完成了,之後要放程式碼的話,只要使用以下語法放到文章內文: <pre name='code' class='javascript'> [程式碼] </pre> 到時網頁載入後,SyntaxHighlighter就會幫你把程式碼的部份即時轉換了。

這邊有幾點要注意的:

  • Blogger的使用者,在要加上BloggerMode(),如下:
    dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
    dp.SyntaxHighlighter.BloggerMode();
    dp.SyntaxHighlighter.HighlightAll('code');
  • 我上面有使用到jQuery的語法,所以要加上:
    <script src='http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
  • 不同類型的程式語言,就在class裡面來決定要使用何種類型。
    Language Aliases
    C++ cpp, c, c++
    C# c#, c-sharp, csharp
    CSS css
    Delphi delphi, pascal
    Java java
    Java Script js, jscript, javascript
    PHP php
    Python py, python
    Ruby rb, ruby, rails, ror
    Sql sql
    VB vb, vb.net
    XML/HTML xml, html, xhtml, xslt

這樣應該就可以輕鬆的在blogger貼程式碼了。

補充一下SyntaxHighlighter的額外用法:
nogutter Will display no gutter.
nocontrols Will display no controls at the top.
collapse Will collapse the block by default.
firstline[value] Will begin line count at value. Default value is 1.
showcolumns Will show row columns in the first line.
  • nogutter 是把左邊的數字條拿掉。
  • nocontrols 是把上面的bar拿掉。
  • collapse 是預設變成合起來的,上面的bar會多一個+展開。
  • 範例: <pre name="code" class="html:nocontrols:nogutter">...</pre>
  • 其他請自行參考。

沒有留言:

張貼留言