[Blog] 如何在 Blogger 上建立 code block 程式碼顯示區塊

reference : http://chiumog.blogspot.tw/2015/02/blog-code-block.html
reference : http://jeffyon.blogspot.tw/2012/01/blogger-code-block.html


在 Blog 上套用 CSS :

CODE {
    display: block; /* fixes a strange ie margin bug */
    font-family: Courier New;
    font-size: 8pt;
    overflow:auto;
    background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
    border: 1px solid #ccc;
    padding: 10px 10px 10px 21px;
    max-height:200px;
    line-height: 1.2em;
}

在想要的 code 前後加上如下範例:

<pre class="codeblock prettyprint">
<code>
中間可以插入你想放入的程式碼
</code>
</pre>

（如果在 code 中有特殊符號，可使用 HTML Encode 轉換）