【Ｃ】如何在Blog中顯示程式碼

有時候，我會想在Blog中貼一些程式碼。
但貼出來，就是一般的文字，還挺醜的，
今天無聊就找了一下，要怎麼好看又簡單的貼上一些程式碼。
果不其然，已經有人寫好了~~網路上優秀的人真多。

首先要在你的Blog的CSS中，加上以下的Code

code {
    display:block;
    overflow:auto;
    font-family:"Courier New";
    white-space:pre;
    background:#999 url(Bg.png) repeat-y scroll left top;
    border:1px solid #CCC;
    margin:5px 15px 0;
    padding:5px 5px 5px 20px;
    line-height:1.2em;
    max-height:180px;
    width:90%;
} 

我自己有小小改了一下CSS，我覺的Code還是不要有Scroll Bar會看起來比較爽，
所以我將max-height拿掉了，其中的圖檔你可以自己找地方上傳，再貼上網址就好了。
另外我也不是用code的方式，我是命名一個Div的Class Name叫code。
而不是直接用code<但我上面貼的是用code的方式>。
UPDATE 2008-10-02：後來我還是改用code的方式……

這招真的不錯，只要加個CSS就好，什麼東西都不用Include，
之前有找到一是要載入JS的，但我覺的簡單跟不要增加網頁的負擔是最好的。
可能因為最近的工作，總是不斷的想要怎麼將網頁加速，除了程式碼的精簡，
減少不必要的Include，壓縮程式碼.....etc.
所以現在都很Care 怎樣才可以最快這部份。

然後要貼上程式碼時，只要照下面的方式貼上就好了。

 echo 'hello world';
 

---

附上CSS語法的說明：資料來源(網站製作學習誌)

display:block;

- 這樣會使得標籤內的內容成為一個方形的區塊。你可以去掉它後，看看會變成什麼樣子。

overflow:auto;
- 有時候程式碼會超過我們指定的寬度，當 overflow 設定 auto 時， 區塊就會出現捲軸，以便顯示過長的文字內容。需要注意的是，這項屬性必須配合 width 屬性，才能在大部份的瀏覽器上正常顯示。

font-family:"Courier New";
- 設定文字字型，這裡我是用等寬字。

white-space: pre;
- 讓 標籤模擬出 標籤的效果，如果用了 pre 標籤的話就可以不用它了。

background:#F0F0F0 url(images/CodeBlock.png) repeat-y scroll left top;
- 設定銀色的背景，並在左方加入一個 code 條狀圖。

border:1px solid #CCC;
- 設定 標籤的邊框。

margin:5px 15px 0;
- 設定程式區塊與其他元素間的距離 (這裡即為 pre 標籤) 。

padding:5px 5px 5px 20px;
- 設定程式碼與邊框間的距離，左方特地加大以容納背景圖。

line-height:1.2em;
- 設定程式碼行高，這樣看起來會舒服一點。

max-height:180px;
- 設定程式區塊的最大高度，以避免程式區塊讓頁面過長；不過 IE 6 下沒有作用。

width:90%;
- 重要設定。沒有它的話，如果你的程式碼文字過長，MSIE 就會爆掉了。

資料來源：(網站製作學習誌)