這個套件作者似乎已不維護，官網也找不到了......
如果您的網頁需要內含程式碼，而您的部落格又是寄放/註冊於一些提供部落格站台，如 blogger, 痞客邦 等，這些大型站台因怕格主們在網頁內隱藏惡意程式碼，所以都有過濾程式碼的功能，當您編寫的網頁在儲存時，站台系統就會自動將網頁內的程式碼給 "洗掉了"。
感謝 SyntaxHighlighter，它是 javascript 撰寫，目前已到 3.0.83 版，讓我們可以在網頁內含各種程式碼。這是免費的，不過若您行有餘力，多少捐贈一些，向作者致謝吧。
目前支援的程式語言見下列表：
| Brush name | Brush aliases | File name |
|---|---|---|
| ActionScript3 | as3, actionscript3 | shBrushAS3.js |
| Bash/shell | bash, shell | shBrushBash.js |
| ColdFusion | cf, coldfusion | shBrushColdFusion.js |
| C# | c-sharp, csharp | shBrushCSharp.js |
| C++ | cpp, c | shBrushCpp.js |
| CSS | css | shBrushCss.js |
| Delphi | delphi, pas, pascal | shBrushDelphi.js |
| Diff | diff, patch | shBrushDiff.js |
| Erlang | erl, erlang | shBrushErlang.js |
| Groovy | groovy | shBrushGroovy.js |
| JavaScript | js, jscript, javascript | shBrushJScript.js |
| Java | java | shBrushJava.js |
| JavaFX | jfx, javafx | shBrushJavaFX.js |
| Perl | perl, pl | shBrushPerl.js |
| PHP | php | shBrushPhp.js |
| Plain Text | plain, text | shBrushPlain.js |
| PowerShell | ps, powershell | shBrushPowerShell.js |
| Python | py, python | shBrushPython.js |
| Ruby | rails, ror, ruby | shBrushRuby.js |
| Scala | scala | shBrushScala.js |
| SQL | sql | shBrushSql.js |
| Visual Basic | vb, vbnet | shBrushVb.js |
| XML | xml, xhtml, xslt, html, xhtml | shBrushXml.js |
首先，先下載套件，解壓縮後，可以看到有很多個資料夾，其中 src 資料夾的 shAutoloader.js、shCore.js 是最主要的，scripts 資料夾則是用來在網頁中顯示各類程式語言的...姑且說是外掛吧，如果要在網頁中顯示 javascript 語法，則需要 shBrushJScript.js，另外，我們還需要 shCore.css 和 shThemeDefault.css (除了這兩個外，還有很多個 css 檔，我猜這可能是美化版面用的...暫不深入研究...)。
所以歸納起來，最起碼要有 5 個檔 -- shAutoloader.js、shCore.js、shCore.css 和 shThemeDefault.css，加上在 scripts 資料夾挑選對應的 .js，將這些檔案上傳至您的網站。
在您的網頁的 head 標頭引入上面那幾個檔，如下：
<head> </head>
在要顯示程式碼的前後插入標記，標記方式有兩種 -- pre 和 script
pre 幾乎都適用，但要記得將<pre>......</pre> 中間的文字，小於符號(<) 要替換成 <，大於符號(>) 要替換成 >。
如下述範例：
<pre class="brush: js">
function foo()
{
......
您自己的程式碼
......
}
</pre>
script 的範例如下 (注意一定要有 CDATA tag)：
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
/**
* SyntaxHighlighter
*/
function foo()
{
if (counter <= 10)
return;
}
]]></script>
老灰鴨試著修改幾篇以前的舊文章，採用 pre tag 還方便的，所以也就懶得再摸索 script tag 了 :-p
如果您沒有可上傳的地方，那麼可以有幾種做法：
1. 在您的網頁內直接指向作者開放的虛擬空間 http://alexgorbatchev.com/pub/sh/current/ ，那麼建議您還是要先下載作者的壓縮包看一下，以了解各檔案的位置，例如：
http://alexgorbatchev.com/pub/sh/current/src/shCore.js
http://alexgorbatchev.com/pub/sh/current/srcipts/shBrushJScript.js
http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.js
根據作者說，這是他自己租用的虛擬主機，採用他的作品的人也愈來愈多，以致主機的負荷也愈來愈重，要支持他繼續下去，希望諸位大德捐獻!!給予實質的鼓勵!!
2. 申請 google 協作平台，這是 google 提供的免費網頁空間，然後將 SyntaxHighlighter 的檔案上傳至 google 協作平台，應該許多人都有申請 gmail，連帶就有其他服務，只等著您去開放/啟動它們，一來程序不複雜，二來可以減少作者租用的主機的負荷。如果您有心善用 SyntaxHighlighter，那可以考慮上傳檔案依作者分配放置。
沒有留言:
張貼留言