在Blogger插入有框的程式碼

在使用Blogger發表含有程式碼的文章時，總是要搞很久。如果要出現<>符號時，則必須要換成＆lt; ＆gt;。

其實只要到「HTML Encoder」將程式碼貼上，按下〔Encode〕按鈕，就可以在下方看到已經將「<」和「>」都轉好了，複製起來就可以用了。

當然在這之前，我們要修改一下Blogger CSS了。接下來在的Blogger後台選擇"版面配置"->"修改HTML"，在]]></b:skin>之前插入下列這段CSS程式碼：

<code>code {
display: block;
font-family: 'Courier New';
font-size: 9pt;
overflow: auto;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
color: #000;
white-space: pre;
background: #ccc url(http://8961483303109839245-a-1802744773732722657-s-sites.googlegroups.com/site/oliverchenweb/blog/blogger-code.gif) left top repeat-y;
}</code>

其中http://8961483303109839245-a-1802744773732722657-s-sites.googlegroups.com/site/oliverchenweb/blog/blogger-code.gif這個圖片因人而異，也就是看自己的圖片放哪個就貼那個URL即可。

如此一來；以後貼程式碼時，只要前後加上<code></code>，就可以有很清楚的程式碼區了。