[Blogger 技巧] 於文章顯示程式碼語法

想跟圖中一樣於網頁中置放一些程式碼語法嗎？請跟著下列文字說明這麼做：
請先至【版面配置】找到【修改HTML】並請記得勾選【展開小裝置範本】，然後搜尋body {


code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #f0f0f0 url(http://圖片位置) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}
若需另一種顯示的程式碼引用語法則於第一種code碼添加後再增加如下語法：
code.ref {
display: block; /* fixes a strange ie margin bug */
overflow:hidden;
background: url(http://圖片位置) left top no-repeat;
border: 1px dotted #a88;
font-size: 13px;
font: normal normal 100% 'Lucida Grande',Georgia,'Trebuchet MS';
line-height: 1.6em;
}

記得<及>要轉換
將 < 以 &lt; 取代
將 > 以 &gt; 取代
將 & 以 &amp; 取代

要使用時，在於文章中選擇下列你要使用的
<code>語法內容放置處</code>
<code class="ref"> 引用文字的部份 </code>

本篇參考教學：

• Kaie's Blog: [CSS] A Cool blockquote for "Code style" and some blogging tips

延伸閱讀：

• HTML實體參照コード變換機 - 日文(語法轉換使用，也可外掛於部落格)
• Itapema 網頁語法轉換器