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

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

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

今天介紹的是SyntaxHighlighter是只要將下載回來的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>
• 其他請自行參考。