2009年5月13日 星期三

在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

2 則留言:

roc 提到...

請問:
小弟我一直很想用這個技術來貼程式碼,可是,自己試了一陣子,效果還是沒有辦法跑出來,按照版主的方法一步步做,還是沒有成功,不知道有沒有可以測試的方法。

hdj 提到...

如果你設定的網頁是這個的話
http://atowng-roc.blogspot.com/
設定的跟我不太一樣耶,
我是去抓原作者的javascript,
你是用google code提供的。
我之前也有試過google code,
但是有問題,所以才會直接去連原作者的檔案,雖然會比較慢一點,
但是至少可以使用。

Related Posts Plugin for WordPress, Blogger...