在 Google Blogger 部落格中添加程式代碼框

在 Google Blogger 部落格中添加程式代碼框： 

筆者以往貼技術文章時，一般都會用普通框將源程式貼上，因為 Blogger 是沒有程式代碼框，後來在網上得知可以修改 Blogger 模版的 HTML，自己加入代碼框編碼，便有代碼框可以使用了。

在 Bugworkshop 添加程式代碼框
在 Blogger 部落格中添加程式代碼框

新增代碼框：

1. 進入 Blogspot 後台 → 範本 → 編輯 HTML
2. 將鼠標移動到 HTML 範本視窗內 → 按鼠標左鍵
3. 然後按 Ctrl+F → 在Search 欄位鍵入下代碼 ]]></b:skin>  → 回車
4. 在 ]]></b:skin> 上面添加程式代碼

範本 → 編輯 HTML

將鼠標移動到 HTML 範本視窗內 → 按鼠標左鍵 → ]]></b:skin>

找到 ]]></b:skin>

在 ]]></b:skin> 上面添加程式代碼

儲存範本

程式代碼 
/*-- Blogger 代碼框 Bugworkshop 20140202 --*/

CODE {

display: block; /* fixes a strange ie margin bug */

font-family: Courier New;

font-size: 8pt;

color:#33f;

overflow:auto;

background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;

border: 3px solid #ccc;

padding: 10px 10px 10px 21px;

max-height:200px;

line-height: 1.2em;

} 

以後在貼程式代碼時，然後轉到 HTML模式下，把文章中程式代碼前後分別用 <code> 和 </code> 包起來，這樣就可以顯示成代碼框了。另外，如果引用的代碼中含有 < > 括弧，用 < 和 > 代替（&和lt;中間無空格），不然 < > 的內容就會被 Blogger 的編輯器當成代碼執行而不顯示。 

相關網址： 

2014 年 2 月 3日 天氣報告
氣溫：24.0 度 @ 16:20

相對濕度：百分之52%

天氣：陽光充沛