在Blogger加入Code語法區塊及資料來源參考出處區塊

資料來源：
Kaie's Blog -> [CSS] A Cool blockquote for "Code style" and some blogging tips

如何在Blogger中加入如HTML或Javascript的語法呢?

##用部落格張貼各種語法來進行教學是很常見的事，通常是在網頁編輯軟體中或是如http://www.manoli.net/csharpformat/ 、http://phpfi.com/ 或 Online syntax highlighting（ http://tohtml.com/ 試用過覺得這個比前者精準好用）線上語法產生器把語法貼在部落格上，如果要像本文的例子，要在左側標示為code的語法區塊中將原來的HTML或Javascript語法呈現出來，要怎麼做呢?
1.從[版面配置]>>[修改HTML]，勾選[展開小裝置範本]。
2.請養成好習慣，對於版面配置的HTML加以修改前，都要先[下載完整模版]。
3.接著在版面配置的CSS樣式表（通常在 </head>之前）加入以下語法。（順便一提，CSS中要加入註解的方式是 /* 註解內容 */ 而不是HTML中的 <!-- 註解內容 --> ）

/* CSS for Code Block in content */
code {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #0000FF url(http://chenkaie.googlepages.com/Code_BG.gif) left top repeat-y;
border: 1px solid #ccc;
padding: 5px 5px 5px 20px;
max-height:200px;
line-height: 1.2em;
margin: 5px 5px 0 15px;
}

4.可自行修改字體、字體大小、語法區背景等等，url旁邊網址的Code_BG.gif圖檔，是每次只要使用語法區塊時就會顯示在區塊左邊的Code圖案，建議另存新檔以免佔用原圖檔提供者的頻寬而導致該圖案無法出現。確認複製與修改完畢後，按[儲存範本]即可。
5.日後要在部落格裡張貼HTML或Javascript等語法教學時，只要在[修改HTML]模式下將要張貼的語法崁在<code></code>之中，張貼後讀者就可以看到完整的語法內容。
[註]有些特殊符號不能直接張貼，如左括弧<要輸入 &lt;才能呈現，因此最好先透過Online syntax highlighting校對一下，才能正確在部落格中呈現語法讓讀者複製運用。

如何在Blogger中加入如資料來源的區塊語法呢?

##如果引用他站資料時，想在如本文上方呈現之紅底白字REFERRENCE資料來源區塊，首先也是加入以下的CSS語法之後，再以<code class="ref">引用的參考資料出處內容</code>的方法即可。

/* CSS for Referrence Block in content */
code.ref{
display: block; /* fixes a strange ie margin bug */
background: #FF6600 url(http://chenkaie.googlepages.com/Code_REF.gif) left top repeat-y;
border: 1px dashed #333;
padding: 10px 5px 10px 20px;
margin: 5px 0 0 15px;
font-size: 13px;
font: Courier New;
line-height: 1.6em;
}