Step1.
首先至SyntaxHighlighter官網下載，發文時版本是使用3.0.83，首頁右邊按download
下載後解壓縮，將檔案上傳至網路空間或主機上，若沒有空間可以使用官方的，
但建議不要使用官方的，畢竟人家也是花錢租主機的，哪天停租了不就無法連了！
你可以贊助作者，首頁右邊按donate。
Step2.
會發現解壓縮後的檔內都是JavaScript與CSS的檔案，而痞客邦無法上傳此檔案，
有在寫網頁的朋友應該知道要引用類別時會將類別寫在<head>標籤內，
還好痞客邦提供了可修改自定樣式的方式，讓我們將類別加進去。
先使用官網的方式，可參考官網這篇文章
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html
程式碼整理後如下：
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script type="text/javascript">SyntaxHighlighter.all()</script>
再加入你使用的程式語言，例如ActionScript3.0，如下程式碼，請複製起來。
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" /> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" /> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script type="text/javascript">SyntaxHighlighter.all()</script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js" type="text/javascript"></script>
Step3.
登入痞客邦，將複製的程式碼貼於「管理後台→部落格管理→側邊欄位設定→頁尾描述→設定」，按「送出」即可，如下圖：
Step4.
Synataxhighlighter預設使用 <pre> ... </pre> 標籤來辨識程式碼，使用如下：
<pre class="brush: as3"> ...你的程式碼... </pre>
在發表文章時，按「html」來開啟「HTML 原始程式碼編輯器」對話框，將上面寫法填入，在此我用AS3的語言來做例子，如下圖與效果：
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
}
Step5.
若是使用其他程式語言，則是將步驟4的"brush: as3"中的as3換成你要的程式語言格式
Synataxhighlighter支援目前大多數的程式語言，請參考這篇，或是官網首頁右邊按syntaxes
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
別忘了在步驟2也要加入該程式語言的js檔喔！
在步驟1有提到，若是自身有網路空間或主機者，則將步驟2的程式碼中的
http://alexgorbatchev.com/pub/sh/current/ 換成你的空間網址即可。
Step6.
其他常見使用技巧，改變行數編號與反白強調，請參考首頁這篇，或是官網首頁右邊按configuration
在<pre>標籤語法內加入，first-line:行數編號的起始號碼，highlight:[數字]反白強調的行數<pre class="brush: as3; first-line: 5; highlight: [10, 15]">...</pre>
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
}
} 
留言列表
