幫文章加入程式碼

因為常常要用到貼指令或程式碼，所以趕快找到作法
主要是要用想要旅行的念頭藏不住的作法

我一次加入

/* 顯示程式碼的CSS設定 */
code {
display: block;
font-family: 'Courier New';
overflow: auto;
border: 1px solid #ccc;
padding: 1px 10px 10px 21px;
max-height: 1200px;
line-height: 1.2em;
letter-spacing: 0px;
margin: 5px 5px 0 15px;
}

code.c{
font-size: 9pt;
color: #000;
background: #ccc url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_CODE.gif) left top repeat-y;
}

code.cmd {
font-size: 9pt;
color: #ccc;
background: #000 url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_CMD.gif) left top repeat-y;
}

code.html{
font-size: 9pt;
color: blue;
background: #FFF url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_HTML.gif) left top repeat-y;
}

code.file{
font-family: 'Georgia';
font-size: 9pt;
color: #000;
background: #FFF url(http://alpha5.cs.nthu.edu.tw/kins/class/swwang/blog/BG_FILE.gif) left top repeat-y;
}


所以用
<code class="c">我是測試用</code>
我是測試用
<code class="cmd">我是測試用</code>
我是測試用
<code class="html">我是測試用</code>
我是測試用


表現出來的就和設定表現出來的一樣。不過在貼HTML code時要注意一下，括號會被browser當作tag讀掉，所以如果要貼括號的話，要用下列的字元更換！

1. < 用 &lt; 更換
2. > 用 &gt; 更換
3. & 用 &amp;更換