經常在一些 Blogger 看到教學內容「程式碼」的區段，都是包在一個特別區塊中，可以清楚的分辦本文及程式碼；但這要怎麼做呢？其實真的很簡單，只要在 <head> </head> 之間的 CSS 區塊，如 <b:skin><![CDATA[ 的後面，加入下列程式碼即可。
其中紅字部分，可以修改為自己所想用使用的圖檔網址哦！

code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 9pt;
overflow:auto;
background: #fff5ee url(圖片網址) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 0 0 15px;
}

以上步驟完成後，只要在文章中，想把有「程式碼」的那一段區域，在「編輯html」用 <code> </code> 將程式碼包起來就可以囉。

本文參閱自：在教學文章中，與眾不同的程式碼
文章標籤
全站熱搜
創作者介紹
創作者 ezpost 的頭像
ezpost

ezPOST

ezpost 發表在 痞客邦 留言(0) 人氣(470)