2009年10月7日 星期三

使用 SyntaxHighlighter

什麼是 SyntaxHighlighter 呢?在它的網站上可以找到以下這段解釋:

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript.

它採用了 LGPL 3

在 SyntaxHighlighter 1.5.1 版以前,SyntaxHighlighter 是放在 Google code 上的,根據 http://code.google.com/p/syntaxhighlighter/ 網頁上的說明,自 SyntaxHighlighter 2.0 版開始則搬家到 http://alexgorbatchev.com/wiki/ 了。

SyntaxHighlighter 吸引我的理由是它會自動為程式碼加上「行號」,這點比 google-code-prettify 優,因為如此一來當程式碼篇幅較大時,閱讀起來也方便許多。但 SyntaxHighlighter 在使用時除了框住程式碼,還得告訴它這段程式碼所使用的語言,相較之下,google-code-prettify 又較為聰明。

不過,SyntaxHighlighter 的設定相對地也麻煩些,之前嘗試使用 1.5 版時,總是被 <br /> 搞得快瘋了,怎麼弄都搞不定。幸好 SyntaxHighlighter 2.0 在設定上比起 1.5 / 1.5.1 版問題少了些。

同樣地,進入 Blogger 版面配置的「修改 HTML」裡,然後將以下這段加到 <head> 及 </head> 之間。


<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css" id="shTheme"/>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shLegacy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js"></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.ClipboardSwf = 'http://http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script

http://alexgorbatchev.com/wiki/SyntaxHighlighter 上提供了 Hosting 的使用方法,這裡我選擇使用 2.0.320 這個版本,原本我嘗試使用 current 的連結,但似乎有點問題,始終無法正確描繪程式碼的 Syntax,所以最後修改成使用 2.0.320 這個版本。

儲存之後,張貼程式碼只要使用 <pre class="brush: js"> </pre> 這樣的語法將程式碼框住就可以了。

不過,SyntaxHighlighter 需要指定程式碼所使用的語言,其中例如 class="brush: js" 表示這段程式碼使用 Javascript。在 http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes 這一頁裡列出了 SyntaxHighlighter 支援的語言種類。以下列出其中幾個:

  1. Bash / shell:class="brush: bash" 或 class="brush: shell"
  2. C#:class="brush: c-sharp"
  3. C++:class="brush: cpp" 或 class="brush: c"
  4. Diff:class="brush: diff" 或 class="brush: patch"
  5. Java:class="brush: java"
  6. Python:class="brush: python"
  7. XML:class="brush: xml"

延伸閱讀:

2009年10月6日 星期二

使用 google-code-prettify

什麼是 google-code-prettify 呢?在它的網站上解釋得其實很簡潔、清楚:

syntax highlighting of code snippets in a web page

google-code-prettify 最吸引我的理由就是它簡單、易用,不但容易設定,在使用上也相對地非常方便,而且最方便的就是只要框住程式碼,並不需要告訴 google-code-prettify 那段程式碼是什麼語言,因為 google-code-prettify 會自動判斷。不過呢…它的一個小小缺點就是不會自動為程式碼加上行號。

那,怎麼設定使用 google-code-prettify 呢?

進入 Blogger 版面配置的「修改 HTML」裡,然後將以下這段加到 <head> 及 </head> 之間。

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

嘿!這裡用了點偷懶的方法,直接從 subversion 中取用 prettify.css 及 prettify.js 這兩個檔案。

接著找到 <body>,將它修改為 <body onload="prettyPrint()">。

儲存之後,當要張貼程式碼時,只要使用 <pre class="prettyprint"> </pre> 或 <code class="prettyprint"> </code> 框住整段程式碼就 OK 了。

延伸閱讀: