程式碼的標記區塊

這邊有很多技術文件會扯到程式碼，或是在提示符號要下的命令，一直苦無好的區塊表示法來顯示，剛好拜讀國良先生的 Blog 時看到超有質感的表現方式，熱心的國良先生也不吝指導，所以就被我偷學會了～

原理很簡單，不過我總是記不得 CSS 的語法和使用方式。只要在 CSS 定義一個自用的標籤像是 <code></code>，把這個標籤的樣式外觀都記錄在樣版的 CSS 裡，以後寫文章的時候直接套用該標籤就搞定了。我還修改補充了一下，除了「程式碼」外，我還會用到「命令」，所以我就多做了一個屬性叫 .cmd 的（好習慣，都用小寫），調整一下變成下面兩段 CSS，把它加入 Template 的 CSS 定義那邊：

code {
  display: block;
  font-family: 'Courier New';
  font-size: 9pt;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height: 1200px;
  line-height: 1.2em;
  letter-spacing: 0px;
  color: #000;
  background: #ccc url(http://abinlee.link.googlepages.com/BG_CODE.gif) left top repeat-y;
}

code.cmd {
  font-size: 10pt;
  color: #ccc;
  background: #000 url(http://abinlee.link.googlepages.com/BG_CMD.gif) left top repeat-y;
}

假設以後有一段程式碼或命令要表示，就把 HTML 的原始碼寫成像是：

<code>這是原始碼</code>
<code class='cmd'>這是命令</code>

就可以顯示成下面這樣啦！

這是原始碼

這是命令

區塊裡用到的兩張背景圖我也是放在 Googlepages 裡面，以便樣版能夠外連。雖然 Blogger 也可以用貼圖的方式來放圖，但是會討厭地縮圖和改檔名，又不能管理，所以只好用外連的囉！另外要提的，一開始本來我是想另外訂一個標籤 <cmd> 給「命令」專用，內容幾乎完全和 <code> 一樣，但不知為何 Firefox 顯示正常，IE 就跑不出來？我可是 follow 標準的 CSS 語法寫的耶！難怪有人說 IE 這個瀏覽器對標準語法的支援反倒有問題，這次倒是第一次見識到了！（害我 debug 了好久，氣！）

參考國良先生的原文指導：
[筆記]在文章裡顯示優質的程式碼區

[注意]：
程式碼或命令行在網頁區塊裡顯示還有一個問題，就是換行。一種解法，如果把改字型(Arial)或是大小可以在一行內多顯示一些字元，可以「儘量」不要換行，不過還是很難避免過長的程式，而且會造成閱讀困難。我的處理方法還是讓它換行，因為這樣還算能閱讀，而且要直接複製貼上也沒有影響，但這樣會遇到 FireFox 裡超長的英文字段(像是網址)不會換行(但 IE 會)，目前無解，只能從內容上儘量避免囉！（中間塞空白，或是帶入中文說明，這樣就會被自動斷行了）