jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化's Archiver

wmh 發表於 2007-7-19 01:22

dp.SyntaxHighlighter 程式碼色彩顯示工具

這是一個 JavaScript 版的程式碼亮顯工具(highlighter),感覺上還 ok,如果沒有意外的話,應該會用這套來改寫本論壇的程式碼顯示區塊。

使用非常簡單,你可以先把程式碼放到 <pre> 或 <textarea> 裡面,標示你要顯示的語言,目前共支援十幾種,還算堪用。
[code html]<pre name="code" class="c-sharp">
... some code here ...
</pre>[/code]或[code html]<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>[/code]然後在這一段 code 的後面,或網頁的最後面加入這一段程式[code html]<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>[/code]

這樣就完成囉。用這一套的好處是不需要用到 server 端的程式,如果你是用在非自己架設的 blog 系統上還挺合適的。本討論區是因為 focus 在 JavaScript 方面的討論,所以特別去找一套用 JavaScript 來達成 code highlight,如果你也熟悉 php 的話,可以參考本站另一篇 [url=http://jsgears.com/forum-9-1.html][PHP] GeSHi - 程式碼色彩顯示工具(Highlighter) [/url],選擇最適合你的方案來應用。

官方網站 [url]http://code.google.com/p/syntaxhighlighter/[/url]

[img]http://lh4.google.com/hunter.wu/Rp5HK45y_0I/AAAAAAAAAgM/edkU6zlel7w/s800/dp.SyntaxHighlighter.jpg[/img]

頁: [1]

Powered by Discuz! Archiver  © 2001-2009 Comsenz Inc.