網頁

2007年12月4日 星期二

與眾不同的程式碼區塊

經常在一些 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> 將程式碼包起來就可以囉。

效果就會像下圖所呈現的程式碼一樣。


本文參閱自：
在教學文章中，與眾不同的程式碼
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)