Blogger 上顯示程式碼

一直都為了在Blogger上張貼程式的格式困擾，直到今天晃到這幾篇Blog [筆記]在文章裡顯示優質的程式碼區 at 良人的大秘寶
【Blog】文章中引用程式碼的作法 at 想要旅行的念頭停不住
才有了解決的方式，加入以下的CSS設定

CODE, .code  { 
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 8pt; 
  overflow:auto; 
  background: #f0f0f0 url(http://chenensign.googlepages.com/BG_CODE.gif) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}

CMD, .cmd {
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 8pt; 
  overflow:auto; 
  color: #ccc;
  background: #000 url(http://chenensign.googlepages.com/BG_CMD.gif) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}

這樣只要在程式碼區域前後加上 <pre class="code"> </pre>就可以顯示較為明顯的程式碼了！