Blogger 讓文章中顯示程式碼區塊 Code block ，避免文章排版凌亂

Blooger 筆記：增加程式碼區塊。

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


如何在 Blogger 文章中有顯示程式碼區塊的效果呢？我本身不懂程式語法，搜尋教學和試驗過程花了不少時間。剛開始整段程式碼跑到部落格最上方，改變插入位置修正這個問題，卻又不能正確顯示出區塊，反覆的搜尋＆修改，終於順利增加程式碼區塊功能，以下說明如何增加也幫自己留下筆記。

在 HTML 中插入一段 CCS 程式碼：

.post code { 

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:250px; 

line-height: 1.2em;

}

操作說明：
Blogger 後台 →「範本」→「編輯HTML」。(請先備份範本，觀看範本備份說明)


尋找/* Posts的位置，用瀏覽器尋找( F3) 能快速找到。


CCS程式碼插入/* Posts下方，儲存範本。


想顯示的程式碼需將 ＜ 改成＆lt;和 ＞ 改成＆gt;，沒有修改符號會被視為要執行的指令，指令執行後就無法順利顯示(備註:＆lt;用全形輸入，修改時用半型)。

若是手動修改麻煩，HTML Encoder網頁提供轉換程式碼，可將＜＞兩個符號自動轉換，將程式碼貼上點擊「Encode」。


編輯文章時在程式碼前後各加上 <code> 和 </code> 就能顯示。


參考文章：
[筆記]在文章裡顯示優質的程式碼區-良人的大秘寶
在Blogger文章中插入程式碼-高登工作室。