在blog呈現美觀的程式碼顯示區域

在良人的大秘寶中找到的技巧

只要將下列CSS程式碼加進blogger範本裡面

code {
display: block;
font-family: Verdana;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 20px;
max-height:200px;
line-height: 1.2em;
}



然後在編寫文章的時候
將程式碼置放於<code>跟</code>之間
就可以在blog中美觀的呈現出程式碼

------------------------------------CSS語法說明分隔線------------------------------------

display: block
設定元件顯示方式為block
font-family: Verdan
設定字體樣式
font-size: 9pt
設定字體大小
overflow:auto
是否有捲軸欄，在此設定為auto，即有超過範圍才會顯現捲軸欄
background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) repeat-y
背景設定，依次為背景顏色、背景圖片、重覆設定，repeat-y為設定背景圖只以垂直的方向重複
border: 1px solid #ccc
邊框設定，依次為邊框的數值、類型、顏色的設定
padding: 10px 10px 10px 20px
內距設定，依次為上、右、下、左的數值設定
max-height:200px
最大高度限定
line-height: 1.2em
文字行距設定