【研究】在Blogger嵌入程式碼教學 懶人包

public class a
{
 public static void main(String args[])
 {
  System.out.println("Hello World");
 }
}

有時會需要在Blogger顯示程式碼，可是直接貼在文章上會有排版上等問題，所以我找了些嵌入式程式碼，其中"CSS Block"是我個人認為比較好上手的，所以這裡就是介紹CSS Block的使用方法。

預設的CSS Block的文字沒有顏色都是白底黑字，所以需要再搭配Google Code Prettify，這樣註解等單字都會有顏色，閱讀起來會比較方便。

關於嵌入程式碼的教學相當多，每個人的做法都不太一樣，而且使用的版本也不太一樣，有些初學者可能對CSS或JavaScript對網頁的互動不太熟悉，學習起來會比較困難，所以我就照我自己成功的做法簡單用幾張圖片表示

一開始進首頁時點選"範本"，再點選"編輯HTML"，將兩個程式碼貼到指定的位置，第一個程式碼要貼到CSS裡，也就是第一個紅框框的位置，第二個程式碼要貼到head的尾端，可以參考第二個紅框框的位置，貼完後在撰寫文章或網頁時，點選html，將程式碼貼上去，也就是<pre class="codeblock prettyprint">到</pre>就是你要顯示的程式碼，這就完成了。

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

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

<pre class="codeblock prettyprint">
public class a
{
    public static void main(String args[])
    {
        System.out.println("Hello World");
    }
}
</pre>