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】
補充一篇德瑞克的說明。請參考：
沒有留言:
張貼留言