如何在Blogger中顯示Code

最近在將一些文章做整理

發現以前程式碼都是直些複製貼上

排列不整齊, 看起來很不方便

所以在網路找了一下如何顯示程式碼

這邊順便整理一下如何設定



1. 在Blogger中選擇"版面配置"

2. 點選一個"新增小工具"後, 新增"HTML/JavaScript"

3. 將以下的程式碼貼在"內容"後儲存就可以了

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

4. 使用方式
將這段程式<div class='codeblock'>class 教學</div>放入HTML的編輯中

顯示效果如下 :

class 教學

如果想依照原來的格式顯示, 可以將 div 換成 pre, 如下
<pre class='codeblock'>class 教學</pre>

注意事項
    1. 有些字元在HTML中會影響顯示, 例如 < >
    2. Tab縮排是八格, 如果只想顯示四格, 需用空白鍵排版(或許有方法, 我還沒試出來)

5. 顯示顏色
步驟和上述的一樣, 只是第三點換成了以下的Code

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

使用方式, 將下列的code放在HTML的編輯中

<pre class="codeblock prettyprint">
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!");
    }
}

參考網址