在Blogger帖子里展示代码

在帖子里显示代码，这个东东是从良人的大秘寶学来的。在写上一篇时，想到了这段代码，可是没寻到。现在翻出来，贴在这儿与大家分享，顺便用这些代码做一下实验。
原文地址：http://klcintw4.blogspot.com/2006/11/blog-post_03.html
（这是摘要，点击下面的More……查看全文）

1.加上CSS
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;
}

2.在文章中將程式碼置於<code></code>區塊中(注意代码部分仍然需要把"<"用"&lt;”代替，“>”用"&gt;"代替)，如
<code>.comment-body-author {
margin:0;
padding:0 0 0 20px;

background-color:#C0C0C0;
}</code>
效果如下：
.comment-body-author {
margin:0;
padding:0 0 0 20px;

background-color:#C0C0C0;
}
PS:
2007-2-27，在这里结合GG的文章，我对第一步的代码做了适当修改，这样鼠标移动后产生了很好的效果（请注意上述效果是按照如下代码运行的）：
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #009900 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:100px;
line-height: 1.2em;
}
CODE:hover {
background-color:#73A0FF;
}

就成了现在大家看到的样子。