[BLOG] 如何在Blogger中插入程式碼 : Google Code Prettify

   [Web][Blog][Blogger][CSS][HTML][JavaScript] 
        在我們撰寫技術文章的時候，常常會需要貼上程式碼與範例，這篇就是教導如何在文章中貼上醒目程式碼技巧。
        Google Code Prettify是個簡單又親民的程式碼區塊工具，當初是由Google推出，放在Google Code提供服務，由於Google Code這個服務已經停用了，目前已經轉換到Github上了。
        歷經多次的改版，已使得Google Code Prettify的使用非常簡單，啟用Google Code Prettify的功能只需新增一行程式：
       1.首先切換到後台管理，點選 "範本" ==> "自訂"==>"進階"==>"新增CSS"，在 </head> 上面加入程式：

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

       2.接著新增CSS，點選 "範本" ==> "修改HTML"，在 </head> 上面加入程式：

.post .code { 
  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:200px;
  line-height: 1.2em;
}

        3.放上要插入的程式碼：

<pre class="code prettyprint">
將程式碼貼上
</pre>

4.就會呈現我們想要的結果囉!!

將程式碼貼上

參考資料：
範碼記憶
Google Spreadsheet 學習筆記
格物致知