Zi 字媒體

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」。 編輯文章時在程式碼前後各加上 和 就能顯示。 顯示效果如下： 程式碼 參考文章： [筆記]在文章裡顯示優質的程式碼區-良人的大秘寶 在Blogger文章中插入程式碼-高登工作室。