夢想．勇氣．幸福初衷

本文引用自網站製作學習誌 - 用CSS顯示程式碼

我們利用標準的 <code> 標籤將它圍繞起來：

<pre><code>
[程式碼放這裡]
</code></pre>

先看看這個 CSS 的樣子：

code {
display:block;
overflow:auto;
font-family:"Courier New";
white-space:pre;
background:#F0F0F0 url(images/CodeBlock.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%;
}

我們一行一行來解釋：

---

display:block;

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

overflow:auto;

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

font-family:"Courier New";

設定文字字型，這裡我是用等寬字。

white-space: pre;

讓 <code> 標籤模擬出 <pre> 標籤的效果，如果用了 pre 標籤的話就可以不用它了。

background:#F0F0F0 url(images/CodeBlock.png) repeat-y scroll left top;

設定銀色的背景，並在左方加入一個 code 條狀圖 (下載) 。

border:1px solid #CCC;

設定 <code> 標籤的邊框。

margin:5px 15px 0;

設定程式區塊與其他元素間的距離 (這裡即為 pre 標籤) 。

padding:5px 5px 5px 20px;

設定程式碼與邊框間的距離，左方特地加大以容納背景圖。

line-height:1.2em;

設定程式碼行高，這樣看起來會舒服一點。

max-height:180px;

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

width:90%;

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

---

當然這種技巧不一定只能用在顯示程式碼上，像是無框架 (no frameset) 頁面的選單、固定頁尾的頁面，都會用到這種技巧 (不過有時還得再搭配其他小技巧，有機會再談) 。

在 <code> 及 </code> 之間的東西要先做處理。
- 「&」(AND符號) 換成 ‘&amp;’
- 「"」(雙引號) 換成 ‘&quot;’
- 「'」 (單引號) 換成 ‘&#039;’
- 「<」 (小於符號) 換成 ‘&lt;’
- 「>」 (大於符號) 換成 ‘&gt;’

如果有 Dreamweaver 的話，可以將程式先貼到 Dreamweaver 的設計檢視上 (就是所見即所得) ， Dreamweaver 會幫我們轉換好。然後再切換到程式碼檢視，把已經轉好的原始碼複製下來即可。

如果沒有 Dreamweaver ，就用上面的轉換規則轉換也是可以的。

不要吃動物，朋友非食物。愛心健康素，地球就會酷(cool)！