2010年8月22日 星期日

SyntaxHighlighter 為網頁中的程式碼排版

以前在看男丁格爾的Blog時,在顯示程式碼部份是使用WordPress的專屬plugin(wp-codebox),可惜無法直接在Blogger上使用。
後來總算找到了SyntaxHighlighter,我個人認為,SyntaxHighlighter與wp-codebox還是有些落差,不過大致上已經足夠了,所以就來寫點筆記記下來囉!


官網上列出23種支援的程式語言,但是我下載了3.0.83版,裡面還多出了兩個shBrushAppleScript.js與shBrushSass.js,我不知道這是什麼語言,可能是作者忘記列上去了吧。

開始安裝

首先到官網的下載頁下載,或是直接載點
假如沒有網路空間可以上傳script,官方也提供檔案網址可以直接使用 。例如shCore.js的網址就是:
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js


最簡單的使用步驟就是:
一、在網頁的<head></head>之間加入以下程式碼:
<script type="text/javascript" src="scripts/shCore.js"></script>
<!--下面這行是要改成你要使用的程式語言,例如這個就是使用JavaScript-->
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<link href="styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="styles/shThemeDefault.css" rel="stylesheet" type="text/css" />

二、再來是放上程式碼的部份,有兩種方法:
   1.把你的程式碼包在<pre class="brush: js"></pre>之間即可,就像這樣:
<pre class="brush: js">
<script type="text/javascript">
    document.write("Hello World!!");
</script>
</pre>  

   2.這種我認為比較麻煩,所以有需要的話請參考官網網頁底下的說明。

注意要寫上要使用語法的class。


三、再把下面語法貼在</body>上方就完成了。
<script type="text/javascript">
    SyntaxHighlighter.all()
</script>


主題

SyntaxHighlighter共有8種主題,但官網上只列出7種。只要修改上述第一步驟第四、五行的相對應的檔案名稱即可:
Django
Eclipse
Emacs
FadeToGrey
MDUltra
Midnight
RDark
進階

在最新版3.0.83新增了一個shAutoloader.js,可以動態的載入語法的js檔。前述的方法,需要使用哪個語法就要加上一行<script type="text/javascript" src="scripts/shxxxxxx.js"></script>,頗費時費力的。

但是使用Autoloader只會在有用到時才載入,這樣不但方便許多,還可以增加網頁載入的速度。
使用的方式只要把原本
<script type="text/javascript" src="scripts/shxxxxxx.js"></script>
 全部只要替換成一行
<script src="scripts/shAutoloader.js" type="text/javascript"></script>
並將上述第三步驟修改成
<script type="text/javascript">
SyntaxHighlighter.autoloader(
  'js jscript javascript  script/shBrushJScript.js',
  'applescript            script/shBrushAppleScript.js'
);
SyntaxHighlighter.all();
</script>
可以看出差別就在新增第2到第5行的程式碼而已。

前方的js jscript javascript就是class名稱,後方的scripts/shBrushJScript.js就是引用的js檔,只要寫上會用到的就行了。

另外在程式碼的地方連點滑鼠左鍵兩下,就能快速的選取全部的程式碼,方便複製。



SyntaxHighlighter設定

只要在下面的程式碼加上想要的設定即可,詳細說明請看官網文件
<script type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.strings.help= "?";
    SyntaxHighlighter.config.stripBrs    = false;
    SyntaxHighlighter.config.tagName     ="pre";
    SyntaxHighlighter.all()
</script>
SyntaxHighlighter預設顯示設定

設定的方法有兩種:
一、加在程式碼裡成為全域設定。
<script type="text/javascript">
    SyntaxHighlighter.default.gutter = true;
    SyntaxHighlighter.all();
</script>

二、在<pre>的class新增,成為獨立的設定。
<pre class="brush: js; gutter:true;firest-line:'10'; toolbar:false">
function {
    alert("Hello World!");
}
</pre>

而可以設定的項目有以下10種,點擊名稱可看官網的DEMO:
auto-links  :是否要讓連結可以直接點擊。
class-name :新增可以讓html或css取用的class。
collapse    :把程式碼收在一行,需要看時再點擊打開。
first-line   :程式碼起始的行數。
gutter     :程式碼行數顯示開關。
highlight   :設定哪一行需要特別強調。
html-script :切換成顯示html語法,以免被解譯成正常的html語法。
smart-tabs :開關smart-tabs功能。
tab-size    :tab鍵的大小。
toolbar    :開關toolbar。

沒有留言:

張貼留言

Related Posts with Thumbnails