三月 05 2008

真是不錯的SyntaxHighlighter-Plus

Published by at 2:08 上午 under wordpress

之前一直在找可以在 wordpress mu 版本下可用的 syntax highlighter, 試了許多都沒辦法很順利的使用, 到昨天找到了一個算可以用的版本, SyntaxHighlighter-Plus (連結). 怎麼說算可以用呢? 主要是因為他的目錄命名會和 wordpress mu內的urlrewrite 會有一些衝突, 因為他的目錄也有用到 “files" 這個關鍵字, 解決方式很簡單, 就是將 syntaxhighlighter-plus目錄內的 files 目錄改名, 並配合調整一下即可, 我將原來的 source 改了一下, 放到這裡來方便 wordpress mu 的用戶來安裝! SyntaxHighlighter-Plus for wordpress mu

使用方式原作者的說明很詳細了, 就是解壓安裝至 plugins 目錄後, 到後台啟用, 再於撰寫文章時, 切換至 “code"模式下(主要是避免 < > 角括號(小於, 大於符號會被 wordpress 編輯器改寫為 < 及 >), 使用[sourcecode language='xxx']程式碼[/sourcecode]的方式將程式碼包住就可以達到語法高亮的效果, 範例如下:

// default display_errors value is on
ini_set('display_errors', Off);
$display_errors = ini_get('display_errors');
echo "display_errors=$display_errors<br />";
echo "1/0<br />";
$a = 1/0;  // nothing happened.
ini_restore('display_errors');
echo "1/0<br />";
$a = 1/0;

要特別注意的是即使第一次使用了 “code" 編輯模式存檔, 再編輯時, wordpress 編輯器仍會再做 > < 的轉碼, 這個是很討厭的一個麻煩問題.

這套程式一樣基於 dp.SyntaxHighlighter 的程式碼開發, 看了一下 for wordpress 的這個版本, plugin 的作者很貼心的設計了多組參數來簡化輸入, 如下:
* `〔source language=’css’〕code here〔/source〕`
* `〔code language=’css’〕code here〔/code〕`
* `〔sourcecode lang=’css’〕code here〔/sourcecode〕`
* `〔source lang=’css’〕code here〔/source〕`
* `〔code lang=’css’〕code here〔/code〕`
* `〔sourcecode=’css’〕code here〔/sourcecode〕`
* `〔source=’css’〕code here〔/source〕`
* `〔code=’css’〕code here〔/code〕`
* `〔lang=’css’〕code here〔/lang〕`
* `〔css〕code here〔/css〕` (or any of the supported language)
(為避免衝碼, 已經上面的半型方括號改為全形的)

另外還有他會針對該文章內使用的 sourcecode language的不同來進行 dp.SyntanHighlighter 的 js 載入, 例如只有 php 程式碼, 他就只載入 shBrushPhp.js , 當然 shCore.js 是一定都會載入的啦, 這樣的好處就可以節省了一些引入的 javascript 的 js 檔, 也相對比較快. 給各位參考!

3 responses so far

Trackback URI | Comments RSS

Leave a Reply