2012年8月16日 星期四

美化部落格的程式碼 使用SyntaxHighlighter

你是否曾想過要在自己的部落格,將原始程式碼包裝有條有理，甚至可以根據不同程式語言的關鍵字進行上色，以提高程式碼的可讀性。
網路上有幾個常見的如下7個地方，在這些地方貼上程式碼後，產生的連結可以嵌入到網頁或部落格中。
  1. GitHub Gist
  2. Dpaste
  3. Chop
  4. Pastie
  5. Plurk Paste
  6. Pastebin
  7. Codepen
  8. Snipplr
  9. Snipt
不過筆者還是喜歡自己來將程式碼放在自己的部落格上，上網找了幾個可以讓程式碼在網上有呈現語法高亮度。
  1. SyntaxHighlighter
  2. Google-code-prettify
  3. highlight.js
  4. jQuery.Syntax
  5. 單純用CSS
最後筆者選擇了SyntaxHighlighter來設定放在部落格的程式碼，SyntaxHighlighter官方公佈的最新版本為3.0.83，建議使用2.x版本的會比較穩定，2.x最後一版為2.1.382，有需要的可以至官方網站索取或下載。
我們以Google Blogger來設定SyntaxHighlighter,依照以下的步驟即可簡單擁有漂亮的程式碼。

Step1. 在Blogger的"範本"→"修改HTML"→"繼續"

Step2 將下列程式碼貼在</head>之前
<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css" type="text/css"/>
<link rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css" type="text/css" />
<!-- brush begin -->
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js" type="text/javascript" ></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPlain.js" type="text/javascript"></script>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://bsatr111.com/xe/modules/editor/components/code_highlighter/syntaxhighlighter/scripts/shBrushBatch.js' type='text/javascript'/>
<!-- brush end -->
<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
    SyntaxHighlighter.all();    
</script>
Step3. 最後為了讓所有的瀏覽器可以支援，必須在"自訂"→"進階"→"新增CSS" 中，加入下面這段CSS
pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Step4. 最後將你要存放的原始程式碼貼至pre標籤之間，以及指定原始程式碼所使用的程式語言類型即可
<pre class="brush:html">
貼上原始程式碼
</pre>

最後要將程式碼放進網頁中還要進行HTML Encode(就是將"<" 變成 "&lt;")，如此整理好的程式碼在網頁上才不會出問題，如果懶自己改，可以到下列網址轉換 Text -> HTML Entities Encoder

如對於放上部落格的程式語言不知該使用何種參數，請參考下表的"別名"，並且"檔案名稱"也有加入才能支援

程式語言名稱
別名
檔案名稱
ActionScript3
as3, actionscript3
shBrushAS3.js
Bash/shell
bash, shell
shBrushBash.js
ColdFusion
cf, coldfusion
shBrushColdFusion.js
C#
c-sharp, csharp
shBrushCSharp.js
C++
cpp, c
shBrushCpp.js
CSS
css
shBrushCss.js
Delphi
delphi, pas, pascal
shBrushDelphi.js
Diff
diff, patch
shBrushDiff.js
Erlang
erl, erlang
shBrushErlang.js
Groovy
groovy
shBrushGroovy.js
JavaScript
js, jscript, javascript
shBrushJScript.js
Java
java
shBrushJava.js
JavaFX
jfx, javafx
shBrushJavaFX.js
Perl
perl, pl
shBrushPerl.js
PHP
php
shBrushPhp.js
Plain Text
plain, text
shBrushPlain.js
PowerShell
ps, powershell
shBrushPowerShell.js
Python
py, python
shBrushPython.js
Ruby
rails, ror, ruby
shBrushRuby.js
Scala
scala
shBrushScala.js
SQL
sql
shBrushSql.js
Visual Basic
vb, vbnet
shBrushVb.js
XML
xml, xhtml, xslt, html, xhtml
shBrushXml.js

PS：如需要Batch程式碼也能在網頁上有美化效果，可以在google搜尋SyntaxHighlighter與shBrushBatch.js關鍵字，再引入相關的網頁路徑及可。

於