function getValue() { var i=0; i=i+1; alert(i); }
套用了SyntaxHighlighter JS 後,只需在想要呈現效果的地方,加上 <pre class="brush: html"> ... </pre>,就可以很輕鬆的完成,只是要等一會兒時間,效果才會出來,可能因為要下載比較多的 js 與 css 檔,所以沒有這麼即時。
接著紀錄自己修改 blogspot 的步驟。
1. 點選右上角的[自訂],並進入[版面配置],選擇修改 HTML。
2.在修改範本裡,找到 <head> 標籤,並在裡面加上以下程式:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> <script language='javascript'> SyntaxHighlighter.config.bloggerMode = true; SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
3.最後按下「儲存範本」,如此,日後只要使用<pre class="brush: html"> ... </pre>,就可以出現顯示行號的效果了。
以前曾經介紹過 Blog 文章中貼程式碼,現在再推薦另一種顯示方式,可以多多比較。
【補充20101001】
在上述範例中,我過於信任作者每次 release 的版本應該是最新最好的,所以我都是參考他 current 的版本。但沒想到作者釋出 3.0.83 版後,畫面真的有點怪,行號出現的位置似乎都會亂掉,但發現許多網友使用舊的版本 2.x 版都還蠻穩定的,所以後來自己將原先使用 current 改為指定舊的版本 2.1.382 ,反而比較美觀。
可以參考作者歷次 release 的版本:
http://alexgorbatchev.com/SyntaxHighlighter/hosting.html
【補充20120214】
補充一篇德瑞克的說明。請參考: