Blogger加入Code Block樣式(CSS)

1. 修改Blogger的網頁範本HTML，並在程式碼中加入下列描述

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: url(http://bloggerhacks.googlecode.com/files/Code_BG.png) left top no-repeat;
border: 1px dotted #777;
padding: 10px 5px 10px 20px;
max-height:170px;
line-height: 1.3em;
margin: 10px 40px 10px 30px;
}
code.ref {
display: block; /* fixes a strange ie margin bug */
overflow:hidden;
background: url(http://bloggerhacks.googlecode.com/files/Code_REF.png) left top no-repeat;
border: 1px dotted #a88;
font-size: 13px;
font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS';
line-height: 1.6em;
}


如下圖：




2. 在文章中加入code block



<code>
...
</code>


3. 
   加入Reference Code
   


<code class="ref">
...
</code>



http://chenkaie.blogspot.com/2006/11/css-cool-blockquote-for-code-style.html