在Google Blogger為程式碼上色的方法--使用SyntaxHighlighter 2.0(高亮度語法)

之前我在Blog寫程式的教學都只有單純的將code包起來
現在我可以幫我的程式碼上色了 ^Q^
其實是使用了SyntaxHighlighter 2.0
它主要是使用javascript幫你把code塗上顏色
看了很多人的教學文件
但是我目前只有下列方法跑的起來

Step1
在Blogger的"版面配置" 中點選 "修改HTML"

Step2
將下列程式碼貼在</head>之前

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/>

這裡包含了所需要的CSS和Javascript

Step 3

一樣把下列javascript程式碼貼在剛才貼上的路徑之後

<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf&#39;;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Step4
最後為了讓所有的瀏覽器可以支援
必須在CSS之中加入下面這段

pre {
 overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */
 white-space: pre-wrap; /* css-3 */
 white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
 white-space: -pre-wrap; /* Opera 4-6 */
 white-space: -o-pre-wrap; /* Opera 7 */
 /* width: 99%; */
 word-wrap: break-word; /* Internet Explorer 5.5+ */
}

貼完之後儲存設定,之後就可以使用下列方法將程式碼寫在Blogger中

<pre class="brush:html">
<pre >

最後要注意的是
所有的tag符號,如<
都必須轉換成HTML碼&lt;
這樣才不會出問題

如果懶自己改
可以到下列網址轉換

http://www.functions-online.com/htmlentities.html

主要參考來源:
http://blog.webunusual.com/2009/02/enlight-your-blogger-with.html

其它參考來源:
http://kkbruce.blogspot.com/2009/03/bloggoogle-bloggersyntaxhighlighter.html

http://keikoblog.blogspot.com/2009/03/blog.html

http://kkbruce.blogspot.com/2009/03/bloggoogle-bloggersyntaxhighlighter.html

http://code.google.com/p/syntaxhighlighter/


http://nio127.blogspot.com/2008/11/syntexhighlighter.html