iT邦幫忙

12

Highlight 原始碼的方便工具

  • 分享至 

  • xImage
  •  

IT邦幫忙上貼文時,有個〔CODE〕的語法,可以把程式碼中的語法給 Highlight 起來,而根據語法、關鍵字變化顏色;希望這樣的功能也能弄在自己的網站上,所以試了這些現成的工具。
thegiive 的文章有關 coderay
http://lightyror.thegiive.net/2007/05/coderay.html
http://thegiive.javaeye.com/blog/77440
才知道怎麼讓程式碼貼在網頁上,
可以有反白、顏色標示語法的方式;
這個作用稱為 highlight,不曉得中文要怎麼講?
反白?著色?高亮度?

一直不曉得 IT邦幫忙 上的 CODE 的語法,
不曉得是用了什麼相關套件做出來?
只知道是用 javascript + CSS 的方式來呈獻語法,
蠻好奇的,不曉得是不是:SyntaxHighlighter
以Javascript來顯示是蠻不錯的方式,IT邦幫忙看起來是預設以 C++ 的語法來顯示。

如果不用 Javascript 的方式來顯示,常見的是用 CSS 嵌入到 HTML 中。
而在 ruby 裡原來有此 coderay 可以很快做出來,
上述文章有很好的介紹使用,安裝也容易,
就不再多言。

最近也瀏覽到 ultraviolet 也可以讓程式碼語法有色,
而且還有不同的 themes,所以就拿來試一試:
在 archlinux 的環境下:
gem install ultraviolet
會發生欠缺 oniguruma.h 的字樣,
看一下什麼是 oniguruma
pacman -Ss oniguruma 找沒有,
就到 http://aur.archlinux.org/ 尋找看有無人提供:
http://aur.archlinux.org/packages.php?ID=11586

以非 root 的身份進行以下產生 package 的動作:

#下載 該檔的 PKGBUILD 檔,
#http://aur.archlinux.org/packages/oniguruma/oniguruma/PKGBUILD
#砍掉最後一行 md5sums=...
makepkg -g >> PKGBUILD
makepkg -s
#這樣就做好了其 package,
#再以 root 身份安裝
pacman -U oniguruma-5.9.1-2-i686.pkg.tar.gz
#再 gem install ultraviolet 就可順利安裝。

以 command 的使用方式很簡單,
參閱 http://ultraviolet.rubyforge.org/usage.xhtml
個範例試一下就略可知怎麼用。

可看看 http://ultraviolet.rubyforge.org/themes.xhtml 內建各種的主題顯示。

uv -s ruby -t lazy highlight.rb -h > a.html

就可產生 lazy 主題,並加上 HTML 頭尾的輸出。
但這執行後會找不到其 CSS 檔,
只要執行
uv -c .

一次後,便會在本目錄產生個 css 的目錄,
裡面有各主題的 css 檔,到時把 HTML 的 Header 指到對的位置順利顯示。

在這一篇文章裡:
http://snippets.aktagon.com/snippets/60-Syntax-highlighting-code-with-Ruby-and-Ultraviolet
提供了一個 ruby script,
可以把現有各種的 themes 一次通通畫出來。

透過上述的這些工具,就可以在網頁貼程式碼的時候,
就有較好的顯示方式及辨識度。


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
fillano
iT邦超人 1 級 ‧ 2009-06-03 18:01:07

看了一下本頁用到的javascript,IT邦是用SyntaxHighlighter沒錯。(版本稍舊就是了)不過一頁用了三十個外部的javascript檔案,好像有點多...

0
player
iT邦大師 1 級 ‧ 2009-06-03 19:45:39

我還在用GeSHi這種
缺點是加重Server的負擔, 以及功能上沒比SyntaxHighlighter好(少了行號顯示, 與Copy到剪貼簿...)
但優點是支援的程式種類比較多種

http://qbnz.com/highlighter/
PHP專用的

用在 MediaWiki的話
有現成的外掛
http://www.mediawiki.org/wiki/Extension:SyntaxHighlight_GeSHi

0
557557
iT邦新手 4 級 ‧ 2009-06-04 23:16:49

真難懂~哀

我要留言

立即登入留言