[Blogger]美觀的Code Block

1. 在CSS定義區塊加入以下CSS Code：
   /* CSS for Code Block in content */
code.code {
display: block; /* fixes a strange ie margin bug */
white-space:pre;
font: normal normal 100% Verdana, Arial, Sans-serif;
font-size: 10pt;
color:#fff;
overflow:auto;
background: #000 url('http://Code Block所要用的背景圖網址/') left top repeat-y;
border: 1px #ccc;
padding: 10px 5px 10px 20px;
margin: 5px 15px 5px 15px;
max-height:250px;
line-height: 1.2em;
text-decoration: none;
}



2. 值得注意的一點是，IE6並不支援CSS中 max-width、max-height、min-width、min-height 四個屬性。這個缺陷會造成當欲顯示的程式碼過長時，在IE下Code Block無法顯示捲軸而一次顯示所有的程式碼，畫面也不美觀，因此可在定義Code Block的CSS語法中加入下面這行：
   height: expression(this.offsetHeight>205?205:'');
   當然，除了這個方法之外還是有其他辦法可以解決這個問題，像這裡有網友採用java script來解決這個問題。



3. 使用方法，將欲顯示的程式碼放在<code class="code"></code>之間，但要注意的是，html中的一些特殊字元需先取代掉，如下所示：
   雙引號「"」 => "
單引號「'」 => '
大於符號「>」 => >
小於符號「<」 => &lt;
AND符號「&」 => &amp;
   更詳細的對照表，附在參考資料裡。

參考資料：

• 美觀的Code和Reference
• 針對IE不支持的max-*樣式的解決方法
• HTML特殊符號的實體碼