在Blog中加入程式碼方塊(code block)

在網頁或是blog中加入程式碼方塊
除非一開始選的範本裡面就有定義好
否則只能自己修改範本裡的css

以Blogger為例，在自訂->版面配置->修改HTML找到

code {
...
}

把整個換成

code {
white-space: pre;
display: block;
background: #eeeeee;
padding: 5px 5px 20px 5px;
margin: 5px;
}

這樣在發表文章的時候，直接點選修改html
將想要放在程式碼方塊中的內容，用code這個標籤夾住，像是

<code>
...
</code>

發佈之後就會看到

...

裡面的用法都是css的標準用法

參數	說明
white-space	縮排方式，可參考CSS white-space 屬性
display	將標籤夾起的部分圍成一個區塊
background	設定背景顏色，淺灰色
padding	內邊界(上左下右)，預設上方會多一行，所以下方設多一點
margin	外邊界，讓區塊跟文字稍為隔開