經常在一些 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 發表在 痞客邦 PIXNET 留言(0) 人氣()