[Blogger HACK] 使用 SyntaxHighlighter 排版程式碼

由於常常會使用copy & paste大法來使用之前在blog貼的程式碼範例，
不過先前都沒排版，
看起來非常不順眼，
今天特地透過Google大神找到這個 SyntaxHighlighter 程式碼排版工具，
如果想知道怎麼使用的話，可以參考這位佛心人士CraftyFella's Blog
的Syntax Highlighting with Blogger Engine教學文。

如果你看不習慣英文的話，就照下面做就好。



步驟一：複製下列script

<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

步驟二：將步驟一的複製的script貼到你的Blogspot樣版，貼在</head>之下即可。

步驟三：張貼你的程式碼區塊，由二種方法，在此只介紹比較簡單的pre tag 包法。

<pre class="brush: javascript">
//你要貼的程式碼，請用pre包起來，之後再class屬性設定brush: 程式碼種類
</pre>

成功的話就會變這樣

//你要貼的程式碼，請用pre包起來，之後再class屬性設定brush: 程式碼種類

Tips：當程式碼片段有標籤的話，請使用html encoder編碼後再貼上即可!
Tips：支援的程式碼樣式，請參閱這裡Bundled Brushes