Blogger 插件 | 文章顯示程式碼區塊---初階版

關鍵字：blogger插入程式碼錯誤，blogger插入程式碼問題。

1. 前言

本文參考於 <<在 Blog 中顯示明顯的程式碼區塊 Code Block - 1>>

更新說明：
2024/10/29 更新文章目錄，並調整文章標題

2018/12/12 新增進階版文章
2018/05/15 文後補充bug

2. 程式區塊的CSS程式碼

	/* ================== Blogger顯示code =================== */
	CODE {
	display: block; /* fixes a strange ie margin bug */
	font-family: Courier New;
	font-size: 8pt;
	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;
	}

view raw showBloggerCode.css hosted with ❤ by GitHub

3. 插件安裝方法：

到 主題>自訂 。

進階選項 > 新增CSS ，貼上本頁一開始的程式碼即可。

4. 使用方法：

進入發文模式 > HTML。



在HTML的編輯模式下，貼上 <code>//這是程式區 輸入你的程式 </code> 。

點擊 預覽



預覽實際效果，藉由預覽效果，確認輸入正確。

5. 實際的使用：

通常黑修斯的使用習慣是，先在編輯模式中貼上想要呈現的程式碼。



再到HTML模式下，找到剛剛的程式碼，在頭尾處加上<code>和</code>，如下圖所示。

再到預覽模式中，確認是否成功。



如果需要繼續編輯，請在</code>下方加入<br /><br />，否則在編輯模式下，繼續增加新的內文，則會被併入程式區塊。
註：<br /> 是空行的意思。

6. 後續補充

2018/05/15 補充的使用bug

如果出現如下圖的bug。



原因可能為<code>被加在<div>之後，與</div> 之前。



藉由下圖的方式加入，即可解決Bug



程式區塊恢復正常。



轉貼本文時，需註明來自黑修斯隨手札記原創作者 hughes chen（黑修斯），及附上原文連結，同時 禁止修改，禁止商業使用 。