利用CSS在部落內加入程式碼

最簡單的方式是使用CSS... 使用CSS去定義CODE的HTML標籤樣式。


在這邊我們使用貼背景圖在左方的方式完成。



先上傳圖片... 圖片



所以目前我的圖片位置在，之後的CSS中背景圖你可以上傳使用你自己的圖:

http://farm3.static.flickr.com/2362/3881302580_7e531b865b_o.gif



開始囉!! 寫文章的時候～要使用程式碼框的步驟就像下面這樣(當然是在修改HTML狀態下)：

1. 加入CSS - 加到Blog的範本裡

code {

display: block; /* fixes a strange ie margin bug */

font-family: Courier New;

font-size: 8pt;

overflow:auto;

background: #f0f0f0 url(http://farm3.static.flickr.com/2362/3881302580_7e531b865b_o.gif) left top repeat-y;

border: 1px solid #ccc;

padding: 10px 10px 10px 21px;

max-height:400px;

line-height: 1.2em;

}

2. 將程式碼使用code標籤包住

public function main():void {

// do something here....

return;

}

3. 上方的結果範例...

public function main():void {

// do something here....

return;

}

________________________________________

優點:

1. CSS 可加在部落格範本中，以後使用直接使用code即可，不必在重新加入CSS樣式。

2. CSS 樣式更換，所有文章中的程式碼顯示時皆更換。




縣市 年度 補助款(千元) 自籌款(千元) 總經費(千元) 苗栗縣 95 10109 531 10640 苗栗縣 96 10114 531 10645 苗栗縣 97 16497 868 17365 苗栗縣 98 10108 532 10640 苗栗縣 99 9663 510 10173