Code Block

以下提供兩種Code Block樣式

這是第一種Code Block
將語法貼在post

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


只要把要張貼的語法放在
<code></code>

以下為第二種Code Block，感謝hnigel教學。
首先必須先修改Blogger的樣式表
在樣式表中加入下面這個屬性
顏色可以照個人喜好更改

#code {
BORDER-RIGHT: rgb(51,153,0) 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: rgb(51,153,0) 1px solid;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
BORDER-LEFT: rgb(51,153,0) 1px solid;
COLOR: rgb(0,102,0);
PADDING-TOP: 10px;
BORDER-BOTTOM: rgb(51,153,0) 1px solid;
}

之後在文章中的用法

<div id="code">
要加上外框的文章
</div>

它的原理其實就是CSS當中外框的設定
如果需要基本的教學
可以去GOOGLE收尋關鍵字"CSS 外框"或"CSS BORDER"即可
在此就不多作介紹


由於程式碼無法直接貼在BLOG文章中
所以請參考下列連結：

[CSS] A Cool blockquote for "Code style" and some blogging tips

幫參考資料加上區塊(on the glade)