近來瀏覽一些人的 Blogger 的技術教學時，常常發現在程式碼敘述的地方會出現一個區塊，把一段看起來像是混亂的程式碼包起來，增加了許多閱讀上的清晰度，區別文章的說明和程式碼內容，也很想加到自己的 Blogger 中，避免殘害瀏覽的朋友們 XXD 上網搜尋了一下，只要加入下面這一段 CSS 就可以實現： .post code { display: block; /* fixes a strange ie margin bug */ font-family: Courier New; font-size: 10pt; margin:.75em 0; overflow: auto; background: #f0f0f0 url(http:// yourWebsite_Image_Storage /Code_BG.gif) left top repeat-y; border: 1px solid #ccc; padding: 10px 10px 10px 21px; line-height: 1.2em; white-space: pre; } 要怎麼放，放在哪裡呢？最近 Blogger 更換了新版的編輯介面，所以加入 CSS 的位置和網路上的順序有點不相同。 選擇左方功能表範本，點選右方的「修改 HTML」按鈕進入修改畫面。 繼續提示修改視窗後，在一拖拉庫程式碼中找到 Post 區段 插入前述的 CSS style 程式碼，yourWebsite_Image_Storage 修改為自己放置 Code_BG.gif 的位置。 完成後按「儲存範本」將修改儲存。 往後若有程式碼需要使用 Code block，編輯時切換至 HTML 模式，在程式碼的前後加上<code>程式碼</code>標籤。（注意：如果在 code 中有特殊符號，同樣要使用 HTML Encode 轉換）