部落格首頁

部落格首頁 最新文章摘要  標題列表 瀏覽文章標題
  記錄夢想生活點滴的最新文章。熱門的分類包括:DIY、狗狗、出遊、志工、家教、花園 … 等等。

本文引用自網站製作學習誌 - 用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)!

 
★新聞抱抱 》 

創作者介紹

夢想與勇氣

夢想與勇氣 發表在 痞客邦 PIXNET 留言(1) 人氣()


留言列表 (1)

發表留言
  • 七先生與艾小姐
  • 這個好難啊~看不懂說.....我是部落格白癡啦~XD
  • 對呀!我是因為本來就會一些電腦程式,加上前陣子開始入門學CSS才看得懂!一般人直接挑選現成的漂亮模版還是最輕鬆啦!

    夢想與勇氣 於 2010/01/06 13:18 回覆