How to : 在blog文章中嵌入程式碼 in blogger

有的時候當我們在寫一些程式教學的文章的時候，難免會想要在blog當中放進一些程式，但是如果要把程式碼當做一般文字編輯，往往會造成讀者的閱讀不易，所以我們可以透過下面的CSS方式來輕鬆解決這樣的問題。

在"修改HTML"的地方，在範本中加入下列程式碼。

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;
}

之後在寫blog的時候，如果要加入片段的程式碼，只要用<code></code>把程式碼放在tag之間就可以了。

另外我們還有可能會有一些參考連結的文章內容，為了要特別標示出引用文章的片段，我們可以加入下面的CSS，然後用<reference></reference>的方式來把引用文字放在tag中間。

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

參考連結：

良人的大秘寶 - 在文章裡顯示優質的程式碼區

Kaie's blog - A Cool blockquote for "Code style" and some blogging tips

想要旅行的念頭停不住 - 文章中引用程式碼的作法