在 blog 貼程式碼使用 Syntaxhighlighter

前言

謠言都說 Web App 的時代來了，可是在 blog 上貼個好看的程式碼片段還是不太容易，以我自己的理解，一來是排版問題、 二來是語言有些符號和 HTML tag 相衝突，例如：C/C++ 的 < > 同時也用在 HTML tag 上，所以當我們寫下：

#include <iostream>

往往會導致 editor 把 iostream 當作HTML tag ，而導致發佈文章後，只看到：

#include

這是因為對於不認識的 tag ，解讀時是可以略過的，所以有些 editor 會在發佈時就清掉這些 tag。此外，為了美觀、可讀性，若是還能讓程式碼貼出後自動支援 syntax highlight 那就更好了！所以這邊就來介紹一個不錯顯示程式碼的好工具—— SyntaxHighlighter。

簡介

Syntaxhighlighter 是好心人 Alex Gorbatchev 利用 JavaScript 搭配 CSS、Flash 開發出來，使用上並不需要 blog host 在 server 端提供支援。不過需要另外的網路空間來存放 *.js, *.swf, *.css, *.png 檔，以前大家流行放在 Google Page 這個免費空間上，不過這個服務去年八月就被 Google 收了，看似能取代 Google Page 的 Google Site 並不讓使用者上傳 js 檔。不過 Alex Gorbatchev 大概是好人作到底吧，他還提供了免費 host 的服務，至於頻寬問題怎樣，我就沒有細究了！

Syntaxhighlighter 支援的語言很多，有十六種：

1. Bash/shell
2. C#
3. C/C++
4. CSS
5. Delphi
6. Diff
7. Groovy
8. JavaScript
9. Java
10. PHP
11. Plain Test
12. Python
13. Ruby
14. SQL
15. VB
16. XML

而且支援六種顏色模式，可以點這裡看到預覽：

1. Default：白色為主。
2. Django
3. Emacs
4. FadeToGrey
5. Midnight
6. RDark

另外，值得注意的是，沈寂了兩年，Syntaxhighlighter 才在今年二月初出了 2.0 版，不過與它相關的 plugin 似乎都還沒跟上腳步，所以想安裝 1.5 的人同樣可以參考這篇文章，方法是一樣的。

正文

1. Syntaxhighlighter 可以在它 Google Code Syntaxhighlighter Project 或是 Alex Gorbatchev 的網站上找到。不過 2.0 目前只能在 Alex Gorbatchev 的網站下載到。（目前 2.0.287 是最新版）
2. 下載完，解壓縮可以看到幾個檔案和資料夾：
   
   1. scripts 資料夾下放著支援的程式語言相關的 JavaScript code。另外有個 clipboard.swf ，是 flash 元件，用來顯示程式碼、支援列印、複製等友善功能。
   2. styles：css 檔。
   3. src：不會用到。
   4. test.html ：Syntaxhighlighter  範例。
3. 請找個網頁空間，上傳 Scripts、Styles裡頭的檔案。Scripts 裡頭的語言種類不一定要全放，選擇想要用的就可以了。找不到網路空間，可以去用 Syntaxhighlighter  作者自己提供的。
4. 修改 blog 的 template ，這步驟會根據你的 blogger host 而異。以 blogger 為例，請先登入再去範本 -> 修改 HTML，將下列程式片段貼到 </body> </html> 前。為免意外，請先備份原始 template 的程式唷。
   
   view sourceprint?

   01.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shCore.js" type=text/javascript></SCRIPT>

   02.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shLegacy.js" type=text/javascript></SCRIPT>

   03.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushBash.js" type=text/javascript></SCRIPT>

   04.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushCpp.js" type=text/javascript></SCRIPT>

   05.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/shBrushCSharp.js" type=text/javascript></SCRIPT>

   06.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushCss.js" type=text/javascript></SCRIPT>

   07.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushDelphi.js" type=text/javascript></SCRIPT>

   08.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushDiff.js" type=text/javascript></SCRIPT>

   09.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushGroovy.js" type=text/javascript></SCRIPT>

   10.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushJava.js" type=text/javascript></SCRIPT>

   11.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushJScript.js" type=text/javascript></SCRIPT>

   12.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushPhp.js" type=text/javascript></SCRIPT>

   13.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushPlain.js" type=text/javascript></SCRIPT>

   14.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushPython.js" type=text/javascript></SCRIPT>

   15.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushRuby.js" type=text/javascript></SCRIPT>

   16.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushScala.js" type=text/javascript></SCRIPT>

   17.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushSql.js" type=text/javascript></SCRIPT>

   18.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushVb.js" type=text/javascript></SCRIPT>

   19.<SCRIPT src="http://alexgorbatchev.com/pub/sh/2.0.287/scripts/shBrushXml.js" type=text/javascript></SCRIPT>

   20.<LINK href="http://alexgorbatchev.com/pub/sh/2.0.287/styles/shCore.css" type=text/css rel=stylesheet>

   21.<LINK href="http://alexgorbatchev.com/pub/sh/2.0.287/styles/shThemeDefault.css" type=text/css rel=stylesheet>

   22.<SCRIPT type=text/javascript>

   23.    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.287/scripts/clipboard.swf';

   24.    SyntaxHighlighter.all();

   25.</SCRIPT>
5. 之後當你要貼上程式碼時，只要切換到 HTML 模式，然後用<pre></pre>框起程式碼的方式就可以了！
   

   <pre class="brush: your_language">
   你的程式碼
   </pre>

   
   



6. 最後是一個跟 WLW 有關的提醒，當我們切換到 WLW 的模式時，我們輸入的 <, >, & 等符號都不會自動轉換為對應的 &lt;, &gt;, &amp ，因此對於像是 C/C++ 這類語言來說，使用 SyntaxHighlighter 還是無法完全解決貼程式碼的問題，我想這點就必須倚賴 plug-in 來幫忙了！ 可參考在 blog 貼程式碼使用 Syntaxhighlighter + PreCode 這篇文章！

參考文章

在 blog 貼程式碼使用 Syntaxhighlighter + PreCode