Blog及Google Blogger使用SyntaxHighlighter(高亮度語法)的方法

　　如果你要在網路上寫些技術性的文章，那文章內容上會有Code這種東西的話，是否會希望Code的地方會有個突出的顯示，或是可以如程式開發工具一樣，會自動帶語法特性，例如行號、關鍵字是什麼顏色，在工具中這些功能稱「高亮度語法」也就是讓我們的Code不只有記事本裡的黑與白，而是能依字、句來分類給予不同的顏色，讓我們「人」可以清楚分出Code裡的東西。 網路上就有這種好東西，我今天也為Blog加上了這個特效，做個學習文件。

　　SyntaxHighlighter是個LGPL 3發行的原始碼專案，網站：http://alexgorbatchev.com/wiki/SyntaxHighlighter ，基本上你要為網站加上這些功能很簡單，你只要下載檔案回來，然後include進你所要使用的網頁中即可，然後在Code的前後加上一個HTML tag：

<pre class="brush: js">
　　//這裡放你要顯示高亮度的Code
</pre>

，但因為我們是要在Blog上使用，所以還要一點小小技巧。

在Blog及Google Blogger使用SyntaxHighlighter的方法，以Google Blogger為例：

一、先到http://alexgorbatchev.com/pub/sh/底下然找你所要使用的版本，其中有styles與scripts兩個目錄，等一下會用到。

二、開啟Blogger管理後台-->版本配置-->修改HTML-->修改範本-->找到</head>-->貼上程式碼：

//步驟請參考：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Usage
//在href的地方使用它們網站提供的服務，在你所要使用版本styles中先引用shCore.css及shThemeDefault.css兩個CSS
//CSS參考：http://alexgorbatchev.com/pub/sh/2.0.296/styles/
<link rel="'stylesheet'" type="'text/css'/" href="'http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css'">
<link rel="'stylesheet'" type="'text/css'/" href="'http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css'">
//然後引用主要的 javascript：shCore.js
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js">
//在src一樣，使用網站所提供的服務，選擇你所要使用的程式語言相關樣式設定的 javascript
//javascript參考：http://alexgorbatchev.com/pub/sh/2.0.296/scripts/
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushVb.js" type="text/javascript">
<script src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js" type="text/javascript">
<script type="'text/javascript'">
SyntaxHighlighter.all();
//SyntaxHighlighter.config.bloggerMode = true;

//這行是特別針對Blogger設定，如果不設定在顯示時會有問題。
SyntaxHighlighter.config.bloggerMode = true;</script>

檔存。

三、然在使你要使用的地方加上一個HTML　Tag包起來：

<pre class="brush: js">
　　//這裡放你要顯示高亮度的Code
　　//重點在class裡的brush後的參數，你可以自由選擇你所想使用的樣式
　　//請參考：http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes
　　//我常用的有：js、css、vb、sql、xml
　　//如果有使用xml，請注意，一定把"<"換成＆lt；，不然會有問題！ </pre>

　　這就完成一個有專業Code樣式的網頁了。