在 blog 中優化顯示程式碼片段

底下的內容是 CSS, 放在 blog 設定畫面裡版面配置==>修改 HTML==>找到類似 body{ 附近(意指在它的前面或是那一段的後面, 不要插到裡面去了）插入下面兩種可以選擇之一的 CSS 碼, 一個是用 <Code> 括住，使用時的範例如下:

<Code>
code {
  display: block;
  font-family: Courier New;
  font-size: 9pt;
  overflow:auto;
  background: #fff5ee url(http://sites.google.com/a/hc888.com.tw/file/img/Code_BG0.gif) 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;
}
</CODE>

效果如下:

code {
display: block;
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #fff5ee url(http://sites.google.com/a/hc888.com.tw/file/img/Code_BG0.gif) 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;
}


或者用有縮編的 PRE tag, 在寫 blog 時的範例如下:

<PRE>
pre {
  display: block;
  font-family: Courier New;
  font-size: 9pt;
  overflow:auto;
  background: #fff5ee;
  border: 1px solid #ccc;
  padding: 5px 5px 5px 20px;
  max-height:200px;
  line-height: 1.2em;
  margin: 5px 0 0 15px;
}
</PRE>

效果如下:

pre {
  display: block;
  font-family: Courier New;
  font-size: 9pt;
  overflow:auto;
  background: #fff5ee;
  border: 1px solid #ccc;
  padding: 5px 5px 5px 20px;
  max-height:200px;
  line-height: 1.2em;
  margin: 5px 0 0 15px;
}