2012-09-26

在部落格網頁中內含程式碼

這個套件作者似乎已不維護,官網也找不到了......



如果您的網頁需要內含程式碼,而您的部落格又是寄放/註冊於一些提供部落格站台,如 blogger, 痞客邦 等,這些大型站台因怕格主們在網頁內隱藏惡意程式碼,所以都有過濾程式碼的功能,當您編寫的網頁在儲存時,站台系統就會自動將網頁內的程式碼給 "洗掉了"。

感謝 SyntaxHighlighter,它是 javascript 撰寫,目前已到 3.0.83 版,讓我們可以在網頁內含各種程式碼。這是免費的,不過若您行有餘力,多少捐贈一些,向作者致謝吧。

目前支援的程式語言見下列表:

Brush nameBrush aliasesFile name
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js



首先,先下載套件,解壓縮後,可以看到有很多個資料夾,其中 src 資料夾的 shAutoloader.jsshCore.js 是最主要的,scripts 資料夾則是用來在網頁中顯示各類程式語言的...姑且說是外掛吧,如果要在網頁中顯示 javascript 語法,則需要 shBrushJScript.js,另外,我們還需要 shCore.cssshThemeDefault.css (除了這兩個外,還有很多個 css 檔,我猜這可能是美化版面用的...暫不深入研究...)。

所以歸納起來,最起碼要有 5 個檔 -- shAutoloader.jsshCore.jsshCore.css 和 shThemeDefault.css,加上在 scripts 資料夾挑選對應的 .js,將這些檔案上傳至您的網站。

在您的網頁的 head 標頭引入上面那幾個檔,如下:
<head>




</head>

在要顯示程式碼的前後插入標記,標記方式有兩種 -- prescript

pre 幾乎都適用,但要記得將<pre>......</pre> 中間的文字,小於符號(<) 要替換成 &lt;,大於符號(>) 要替換成 &gt;
如下述範例:
<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,那可以考慮上傳檔案依作者分配放置。

沒有留言:

張貼留言