在blogger顯示程式碼

1. 在"版面配置" -> "新增小工具" -> "HTML/Javascript工具", 標題隨便打

內容填這樣:

<style>
.post .codeblock {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 10pt;
overflow:auto;
color: #000000
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>

其中color以及background的值可以更改, 請參考RGB三色表

2. 在要顯示成code的html裡, 標籤加上 class='codeblack'

比如說

<pre class="codeblock">I am code block</pre>

3. 如果要印的code有HTML碼, 請先做encode的動作:

http://www.opinionatedgeek.com/DotNet/Tools/HTMLEncode/Encode.aspx

4. 如果要將code上色, 將標籤的class加上prettyprint:

<pre class="codeblock prettyprint"> int main () {
    printf("hello world");
}
</pre>

 顯示效果像這樣

 
int main () {
    printf("hello world");
}

 這樣就大功告成了