在許久之前,成經介紹過 Code Formating... 給大家過,不過覺得這樣的呈現還是不夠亮麗,之前一直就覺得應該可以把 SyntaxHighlighter 整合到 Pixnet 才對,今天終於發現 SyntaxHighlighter 在2月的時候推出了 2.0 版本,因此心想還是來整合看看吧…
由於 pixnet 無法上傳 Javascript 檔案以及 css 檔案,因此需要將本來應該要放在 <head> 底下的程式碼放到其他地方去了,怎麼設定呢?
請到pixnet的管理後台 → 部落格管理的 側邊欄位設定 → 頁尾描述 (也可以放在其他地方,只要你喜歡就可以了) → 設定 → 請將下面的程式碼貼上即可
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"></script>
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css" id="shTheme"/>
由於預設值是使用 <pre> 來當做要 Highlight 的對象,由於測試了幾次後,因此要呈現程式碼的編碼方式的高亮度呈現,請切換到原始碼模式將下面的程式打上,並且標示其 calss 為class="brush: csharp" ,brush 後面的內容請依照您要的格式變更,可參考下面的列表。