替blog加入美美的code框

Blogger上常常可以看到許多人寫教學時用到一些漂亮的code框將程式語言的區段給標出。剛到Blogger時我還以為是Blogger的特殊功能，後來google了知道那是hack的一種。下面列的是在blogger中添加灰色code框的方法(效果見下範例)

1、把底下這段程式碼複製貼上到 </b:skin>的上面
註：藍色部份，你可以去開通自己的Google Pages，再把那張code_BG.gif圖檔上傳到自己的Google Pages空間裡，比較無後顧之憂。
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;
background: #ccc url(http://sandnfish.googlepages.com/Code_BG.gif) left top repeat-y;
}

2、接下來，只要在HTML編輯模式下，在範例程式碼的前後，用<code>及</code>包起來即可，就像底下這樣。<code>body#layout #main-wrapper {<br>margin-left: 0px;<br>margin-right: 0px;<br>width: 400px;<br>}</code>

3、你再切換到「所見即所得」的編輯模式下（英文：What You See Is What You Get，縮寫：WYSIWYG），就會看到底下的結果：
body#layout #main-wrapper {
margin-left: 0px;
margin-right: 0px;
width: 400px;
}

備註：這裡需要注意的一點是，在html編輯下，某些特殊符號需要做變數替換的工作

* < 用 < 更換
* > 用 >更換
* & 用 &更換

本篇文章引用自：iPlay99-我的線上玩樂誌