長尾巴的魚: 12/01/2006

2006-12-20

如何在 google blog 上面放 source code

之前想要在blog上面放上自己的source code. 但是找不到比較好的方案去做這樣的事情.最近發現一些人的blog上面可以放上美麗的source code 還有行數. 就研究了一下,發現一個免費的javascript + css 的方式 dp.SyntaxHighlighter.
不過他在google blog上面會有問題, 所有繼續找下去. dp.SyntaxHighlighter在google中的問題講到如何解決這樣的問題. 他也改寫了原來的java script來符合他找到的解決方案.

修改步驟:
1. download allcolor.js, shCore.blogger.js,SyntaxHighlighter.css
2. 找個地方放這三個檔案, 既然已經有google account 就去申請google page 放這三個檔案吧.
3. 修改google blog 網頁設定 [範本-修改HTML]


<head>
<link href='http://longtai.tw.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
.....
</body>
<script class='javascript' src='http://longtai.tw.googlepages.com/shCore.blogger.js'>
<script class='javascript' src='http://longtai.tw.googlepages.com/allcolor.js'>

4. 在blog文章中加入 pre tag , 將source code 放在pre tag中.

 
  <pre name="code" class="${language}:${displaymode}">
   ${language} 想要顯示的語言模式. 
   ${displaymode}
   1. firstline[num]: num 為起始的行數.
   2. expandcode: 摺疊代碼
   3. showcloumns: 顯示行號
   4. nogutter: 隱藏行號