美化部落格的程式碼 使用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關鍵字，再引入相關的網頁路徑及可。