我的部落格園CSS：處理代碼塊

我是一個懶人，懶人就是不喜歡搞太複雜的東西。我希望我的部落格比較簡單，一是可以方便撰寫，二是能夠使頁面盡量的小。

所以，在貼代碼的時候，我只希望能與本文區分出來，代碼比較多時，能限制大小，並按代碼常用的字型來顯示。其它的功能如文法高亮和程式碼摺疊功能就不需要了。

先看看我設定的CSS：

.code{    border: 1px solid #ccc;    padding: 5px;    background: #eee;    color:#004080;    overflow: auto;    font-family:Consolas "Courier New" Fixedsys;}.longcode{    border: 1px solid #ccc;    padding: 5px;    background: #eee;    color:#004080;    overflow: auto;    height: 200px;    font-family: Consolas "Courier New" Fixedsys;}.console{    border: 1px solid #ccc;    padding: 2px;    background: #000;    color: #ccc;    overflow: auto;    font-family:"Verdana";}

這裡設定三個class，分別用在代碼（按原始大小顯示，用於小代碼量-10行以內）、長代碼（只顯示200px)、控制台輸出(黑底白字)，顯示效果個人還滿意…

突然感覺，這個CSS還是不夠精減，My Code都是用<pre>來實現的，所以，我可以將預設的代碼樣式放在pre中定義，於是得到如下：

pre{    border: solid 1px #ccc;    padding: 5px;    overflow:auto;    background: #eee;    color:#004080;    font-family:Consolas "Courier New" Fixedsys;}.code{}.longcode{    height: 200px;}.console{    background: #000;    color: #ccc;    font-family:"Verdana";}

貌似又簡單多了。