網站製作學習誌

記錄學習製作網站的一切

用CSS顯示程式碼

如何用 CSS 來呈現程式碼呢？就像是我在這篇文章裡所置放的 HTML 原始碼一樣，不論在 IE 或是 FireFox 下，都可以有不錯的顯示效果，也不容易破壞版面。但要怎麼做呢？

例如我們有以下的程式碼：

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript">
<!--
var iCount = 0;
function changeText(objElement) {
var oTextCount = document.getElementById("txtCount");
var oCount = document.getElementById("hdnCount");
iCount = objElement.value.length;
oTextCount.innerHTML = "" + iCount;
oCount.value = parseInt(iCount);
}
//-->
</script>

為了符合文意，我們利用標準的 <code> 標籤將它圍繞起來：

1
2
3

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

可是這樣還是沒辦法使程式碼排列整齊，因為空白會被忽略掉。可是如果用 <pre> 標籤，就會使得文件結構變得複雜許多；而且 <pre> 標籤也不符合我們的文意 (註) ，透過 pre 標籤，已經可以呈現程式碼效果，但是看起來很醜；因此我們就要借重 CSS 來幫我們呈現程式碼的效果，讓它更漂亮一些。

註：我後來發現光用 code 標籤圍繞的話，在複製程式碼貼到別的地方時 (例如記事本) ，整個程式會變成一行。所以後來我只好把所有 code 標籤外面，再包一層 pre 標籤。

先看看這個 CSS 的樣子： 

1
2
3
4
5
6
7
8
9
10
11
12
13

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) 頁面的選單、固定頁尾的頁面，都會用到這種技巧 (不過有時還得再搭配其他小技巧，有機會再談) 。

補充： (感謝「傻RD」網友的提問)

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

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

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

Comments