2008年4月12日 星期六

在Blogger中處理程式碼區塊

第一種方法，是在程式碼資料區塊外加框，並且加入底圖(我這裡故意沒加底圖)。
這個方法的參考網址是：http://skyvee.net/2007/07/code.html
底下為原文收錄：

記得改程式碼前, 要先備分template哦!


1. 請先下載此圖檔, 然後上傳到一個網頁空間... 記錄此圖片網址.(請記得下載, 最好把圖片另存, 萬一skyvee以後不小心砍掉可就麻煩囉!^^")


2. 將以下程式碼, 貼到 <head> </head>之間的CSS區塊,如 <b:skin><![CDATA[
的後面. 其中紅字部分, 要改成另外存的圖片網址哦!


code {
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New;
  font-size: 9pt;
  overflow:auto;
  background: #fff5ee url(圖片網址並注意大小寫要正確) left top repeat-y;
  border: 1px solid #ccc;
  padding: 5px 5px 5px 20px;
  max-height:200px;
  line-height: 1.2em;
  margin: 5px 0 0 15px;
}


3. 以上步驟完成後, 只要在文章中, 想把有 程式碼 的那一段區域, 用特別的圖示標出, 就可以用 <code> </code> 包住那段程式碼囉!


效果就會像這篇文章中出現的程式碼一樣


第二個方法，可用於框示各種類程式碼，並有提供複製及列印功能。
這個方法的參考網址是：http://yehhou.blogspot.com/2007/06/blogger-dpsyntaxhighlighter.html
原始提供網址是： http://code.google.com/p/syntaxhighlighter/(其Downloads頁面有原始檔可供免費下載)
這部份內容較多，請自行至該二處網址參考使用。

張貼者： Kevin 於 清晨6:04
標籤：

0 意見:

張貼留言

訂閱： 張貼留言 (Atom)