Blogger Code block_文章顯示程式碼區塊

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:200px;
line-height: 1.2em;
}


blogger「資訊主頁」→「設計」→「修改HTML」。(請先備份template，如何備份參考更換Blogger template(版型)_修改HTML)


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


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


想顯示的程式碼需將 ＜ 改成＆lt;和 ＞ 改成＆gt;，沒有修改符號會被視為要執行的指令，指令執行後就無法順利顯示(備註:＆lt;用全形輸入，修改時用半型)。若是手動修改麻煩，HTML Encoder網站提供轉換程式碼，可將＜＞兩個符號自動轉換，將程式碼貼上點擊「Encode」。


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


顯示效果如下：
程式碼

加入書籤 :