在文章中貼上程式碼code範例

在文章中貼上程式碼
加個背景美化閱讀
就像是這樣

看到網路上有很多blogger的相關教學，發現大家在講解哪些程式要新增，哪些程式要做修改，都會在這些程式碼的背景加上簡單的美化，以突顯程式碼，讓閱讀更加的清楚。

因此我將這篇列為我網誌裝修的第一篇文章。因為覺得在網路上參考那麼多人的程式跟改法，自己也應該要把這些簡單的應用傳遞下去，別只當個消費者。

我這篇是參考iPlay99的文章來製作。其實很簡單只要三個步驟，你也可以讓文章裡面的程式也加上背景喔。

→製作背景圖片
其實這個背景引用的圖片也只有最左邊那一條bar，其他背景是靠著CSS的語法來填滿的。所以先把這個bar的圖片存在你的空間裡面，我是將它存在我的Flicker裡面。簡單說，找一個你的網路空間存放圖片，好讓blogger去連結。

→增加程式碼
在版面配置->修改HTML->修改範本裡，將展開小裝置範本打勾。
找到</b:skin>，將下面程式碼貼在，</b:skin>之前。

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

※藍色的網址就是換成你圖片存放的位置。

→文章編輯
完成上面的程式碼之後，以後只要在你的"修改HTML"模式下。
將你想要加上背景的程式碼，前後用 <code></code>
包住，就可以有程式碼在方框裡的效果了。

順便提醒，如果是用HTML模式編輯你的文章時。
下列符號要注意。


< 用 &lt;更換
> 用 &gt;更換
&用 &amp;更換