2013年8月1日 星期四

程式碼上色方式比較

Syntax Highlighter 
範例:

優點:有行號,有卷軸。
缺點:聽說會比較慢。

參考連結
官網

Google Code Prettify
範例
優點:看起來比較乾淨、清爽。
缺點:程式碼比較長的話,只有在 Firefox 底下會出現卷軸,在 Chrome, IE, Safari 都會強制自動換行。也沒有行號。

參考連結:
程式碼上色:Code Block and Google Code Prettify
在網頁中嵌入顯示程式碼:Google Code Prettify
用 Solarized 幫 google-code-prettify 上色

Online syntax highlighting
範例

優點:通常為程式碼上色都是用 <pre> 的方式,而且要另外針對角括號做跳脫。雖然有網站可以幫我們轉換特殊符號,但也是要做一次轉換的動作,再加上前頭要先引用外掛檔,後頭再呼叫函數。但是使用這個線上轉換程式碼內容並且同時上色的網站,不需要引用任何外掛,也不需要在結尾呼叫函數。也就是說,轉換後的 html 碼,除了轉換程式裡的角括號這類特殊符號,還把顏色也設定好了。所以可以直接把轉換後的內容貼到文章裡面,不需要引用任何 js 檔。

缺點:樣式不好看。沒有標示程式區塊。沒有行號。

參考連結
官網
Online syntax highlighting讓你把程式碼線上高亮(還能崁入網站)

某種樣式


我覺得這個也不錯。而且複製的時候絕不會複製到左邊的數字。不過好像是 WordPress 專用的套件。可參考:http://www.92csz.com/48/1198.html
查了一下,這可能是 Cryon (只是可能,看起來很像)。可參考 Crayon Syntax Highlighter:一款不错的WordPress代码高亮插件 
.

沒有留言:

張貼留言