現在我可以幫我的程式碼上色了 ^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 = 'http://alexgorbatchev.com/pub/sh/2.0.320/scripts/clipboard.swf';
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碼<
這樣才不會出問題
如果懶自己改
可以到下列網址轉換
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 則留言:
請問:
小弟我一直很想用這個技術來貼程式碼,可是,自己試了一陣子,效果還是沒有辦法跑出來,按照版主的方法一步步做,還是沒有成功,不知道有沒有可以測試的方法。
如果你設定的網頁是這個的話
http://atowng-roc.blogspot.com/
設定的跟我不太一樣耶,
我是去抓原作者的javascript,
你是用google code提供的。
我之前也有試過google code,
但是有問題,所以才會直接去連原作者的檔案,雖然會比較慢一點,
但是至少可以使用。
張貼留言