Blogger Code block _ 文章顯示程式碼區塊

Blogger許多插件需要修改HTML加入一些程式碼(語法)，在爬文搜尋blogger功能教學時，常會看到教學文通常會把插件的程式碼框起來，避免和文章內容混合，方便訪客複製語法添加到自己的部落格。


修改方式如下：

1. 到後台的「範本」→「編輯 HTML」
2. 搜尋「/* Posts」這個關鍵字
3. 在「/* Posts」的區塊貼下面的程式碼：

.post .codeblock { 
display: block; /* fixes a strange ie margin bug */
font-family: Courier New; 
font-size: 10pt; 
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:1000px; 
line-height: 1.2em;
}

說明：
.post .codeblock 這行是指在class='post' 的 tag 中 (我們發表的文章都有帶)，
裡面的 tag 又有 class='codeblock' 的區塊就以獨特的方式顯示，
codeblock 這個 class 名稱可以自訂，如 code 等，但要避免與其他 css 衝突。
在其他的教學文中第一行也有人直接用 code {，
這樣的話要顯示程式碼可以直接用 教學，
不過在 blogger 編輯時若在撰寫和 HTML 間切換的話設定就會跑掉，
所以我後來還是用 class 的方式。

background 中有個圖片的連結，
大家要把 gif 下載後放到自己的網路空間。
還有 max-height 是指這個區塊最高能到多高，
如果超過的話就會在右方顯示 scroll bar，
我為了要讓程式碼區塊能完整顯示，所以設了一個比較大的值。


使用方式如下：

編輯程式碼時在 tag 中加上 class='codeblock'，
如這段程式： <div class='codeblock'>class 教學</div>

顯示出來的效果為：

class 教學

 注意：
如果程式中有角括號等會影響 html 顯示的字元，
得先用 Html Encode 工具 將程式轉換。

參考網址： 符碼記憶