如何在Blogger插入程式碼

Step 1:版面配置 => 新增小工具 => HTML/JavaScript

Step 2:在裡面插入下列程式碼

<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>

Step 3: 用HTML編輯文件並插入下列程式碼

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

Step 4: 當程式碼包含"< >"時須轉碼
               可至此連結做轉碼動作

另外，若想要自動對程式碼上色，可以再新增一個小工具並插入下列程式碼

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

就可用下列程式碼達成自動上色的效果

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

文章參考連結: 此連結