在 Blogger 使用 SyntaxHighlighter

終於找到一個改善貼文裡程式碼顯示的好東西:
SyntaxHighlighter
使用方法在 德瑞克 的這篇文章中有很詳細的說明

套用結果如下:

<link type='text/css' rel='stylesheet' href='css/SyntaxHighlighter.css'></link>
<script language='javascript' src='js/shCore.js'></script>
<script language='javascript' src='js/shBrushCSharp.js'></script>
<script language='javascript' src='js/shBrushXml.js'></script>
  
<pre name='code' class='html:collapse'>
... some code here ...
</pre>

//以下要放在頁面最後, 或在 window.onload 時再執行
<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

比起以往用 blockquote 之類的可說好太多了,
跟 TextArea 同樣方便,不需轉換跳脫字元,且還多了顏色標示的可讀性..

不過在試用 SyntaxHighlighter 的過程中,
才發現原來我以往關於程式碼貼文很亂的問題根源並不在 blockquote!!!
而是 Blogger 自動將換行符號轉為 <br />的功能..
所以我以前才捨 textarea 而用 blockquote 的~
雖然關閉此功能就能改善,但...我以前寫的文章怎麼辦~~ 格式全亂了...啊~~~~~~
而且想到以後寫文章也要自己手動加入換行符號,簡直是一個惡夢!

還好...網路上果然是人才濟濟的
重新搜尋了一下 SyntaxHighlight For Blogger
確實很多人都有同樣的需求~~
所以有了 BloggerMode() 的功能
只要在呼叫 HighlightAll() 之前
加入這一行

dp.SyntaxHighlighter.BloggerMode();

就 OK 囉~
peace..