105.07.16 在Blogger文章加入程式碼 (一)

這個我已經用兩次了
分別在

105.07.02 Blogger範本設計工具之參考紀錄
105.07.14 Blogger加入FB讚按鈕和G+加1按鈕
不過記性太差之還是來記錄一下好了@@

我把寫法記錄在最上面，如何設置環境放在下面
因為只要設置一次，而寫法會忘很多次OuO
寫法：

<pre class="codeblock ">
/*把程式碼夾在中間就可以了*/
</pre>

上色版本

<pre class="codeblock prettyprint">
</pre>

轉碼工具 HTML Encoder (下面再介紹)
設置方法：
進入版面配置

新增小工具

新增 HTML/JavaScript

新增如下程式碼

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

後按儲存

這樣就完成了
用法在最上面提過了

如果要顯示的程式碼中有角括號<>
則需要透過 HTML Encoder 轉碼後再貼上才不會錯誤

若要程式碼上色
請參考下面參考資料 (懶

參考資料：
[教學] 如何在網頁blogger中插入程式碼  PJCHENder愛分享
在網頁中嵌入顯示程式碼：Google Code Prettify   符碼記憶

搜尋關鍵字：插入、t8 bj4