分類: 程式技術

在 “懶懶喵日記” 那裡看到一個不錯的 client 工具, dp.SyntaxHighlighter, 因為之前也想在網頁上呈現一些程式碼, 而看起來也希望能達到比較像程式碼的方法呈現, 所以就來試用了一下, 該網站連結:

http://www.dreamprojections.com/syntaxhighlighter/

使用這個 javascript library 的好處是對 server side 沒有負擔(因為都丟到 client side 去做了), 而且對於大部分的應用領域來說都非常足夠了, 功能很多, 支持的語法有:

1. C#
2. CSS
3. C++
4. Delphi
5. Java
6. JavaScript
7. PHP
8. Python
9. Ruby
10. SQL
11. Visual Basic
12. XML / HTML

而且還有指定行, 顯示行(line #), 顯示列(col #), 動態展開, 看原始內容(利用 textarea 新開視窗), 列印等不錯的功能, 但是還是有一些些缺點, 例如無法指定大小(預設是全部程式碼顯示的高度及所在區域的全部寬度, 所以寬度可以自行利用 html 語法再調節, 但高度沒辦法, 有篇類似的方法, 可以參考這篇文章: http://bbs.toseek.info/cgi-bin/topic.cgi?forum=3&topic=36 ), 但真的還是很好用的一組 Syntax Highlighter, 所以推薦給大家囉, 目前也已應用在 sample.diary.tw 網站上, 例如: http://sample.diary.tw/2/chart1.php , 未來應該會多利用這組程式碼來作為顯示程式碼的工具囉!
使用方式很簡單, 下載該組件後, 在要使用的頁面上加入:

css:

<link type="text/css" rel="stylesheet" href="Styles/SyntaxHighlighter.css"></link>

javascript 函數:

<script language="javascript" src="Scripts/shCore.js"></script>
<script language="javascript" src="Scripts/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>

其中 css 可自行參考如何放置, 在 javascript 則是要含入 shCore.js 後, 再含入 shBrushXXX.js 其中 XXX 為要使用的程式語法, 如 Xml, Cpp 等. 接下來就是要一行起始指令:
dp.SyntaxHighlighter.HighlightAll(‘code’);
其中的 ‘code’ 為要 highlight 區域 (textarea) 的名稱, 所以要使用就用
<textarea name=code class=c>….</textarea>
其中的 name 就指定為 code 即可, 而 class 則為要 highlight 的程式語法名稱對應的 class 即可, 另外尚有幾個功能用參數如下:

1. Smart tabs
2. First line
3. Expand code
4. Show columns
5. No gutter

可以再參考說明, 例如希望顯示預設先不展開, 可以這樣下:
<textarea name=code class=c:collapse>….</textarea>

呈現結果很不錯哦, 如下:

請大家多多利用!
本篇文章的 sample 可以參考: http://sample.diary.tw/3/cpp.php

延伸閱讀: http://www.cnblogs.com/unruledboy/archive/2005/06/28/HTMLHightLightCS.html