[CSS] pre 的運用

From: Polin Wei

　　在網頁撰寫時，顯示整齊的程式碼可以讓人好檢視(如下圖)。


　　但有時空格常會被吃掉，要怎麼作才能顯示出那些空格呢? 可以在 css 中定義一個 class 如下:

.code {
display: block; /* fixes a strange ie margin bug */
border: 1px solid black;
padding: 12px;
font-family: Courier New,Courier,monospace;
overflow:scroll;
letter-spacing: 0em;
white-space: pre ; // 要加入這一行
background: #F4F4F4 url('http://polin.wei.googlepages.com/codebg.png') left top repeat-y;
}

　　然後在網頁中只要如下撰寫，就可以正常顯示了。

<div class="code">
if(window.XMLHttpRequest) {
  myXmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
  myXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
</div>