Blogger嵌入程式碼 - Google Code Prettify & CSS Block

1. 版面配置-> 新增小工具-> 選擇"HTML/JavaScript"小工具
插入以下Google Code Prettify的程式，此功能只會在程式碼周圍加上外框並填上顏色，如果想要底色填滿，需要再加入CSS Block的程式碼

<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

2. 版面配置-> 新增小工具-> 選擇"HTML/JavaScript"小工具
插入CSS Block的程式

<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:1000px;
line-height: 1.2em;
}
</style>

3. 在網誌裡新增程式碼

<pre class='codeblock'>
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</pre>

以下為顯示結果

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}

4. 如遇到HTML語法<或>符號，需透過以下網址轉換語法，才可以正常顯示。
HTML Encoder

5. 參考資料
在網頁中嵌入顯示程式碼：CSS Block
在網頁中嵌入顯示程式碼：Google Code Prettify