2014年9月23日 星期二

在 Blogger 內貼程式碼 : 使用 Google Code Prettify

        這裡介紹如何使用 Google Code Prettify 來幫助我們將 Blogger 文章裡面的程式碼上色。
     
        首先進到 Blogger 的後台 > 版面配置 > 新增小工具 > HTML/JavaScript


        接著要設定內容中輸入一些程式,標題不用打,需要輸入的程式貼在下面了,可以直接複製過去,其中部分設定可以自己嘗試改改看,例如 background 的顏色等等,根據個人的喜好自己試試。
        
<style>
.post .codeblock {
display: block;
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="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

        到這裡就算設定完成了。接著如果想要在文章中貼程式碼會需要直接寫 HTML,由於程式碼裡面常常會有 < 及 " 等特殊的符號,這些符號在 HTML 會需要做一些轉換,可以到 Postable 網站把特殊符號轉換成 HTML 的格式。

      接著到 Blogger 的 HTML 編輯模式下把轉換後的程式碼貼上,並在前後加上 <pre class="codeblock prettyprint"> 及 </pre> ,例如  <pre class="codeblock prettyprint">a &lt; b</pre> ,整段程式碼的前後加就可以了,不用每一行程式碼都加。

      輸出結果如下
a < b
 
      另外,這個功能在手機板的網頁是無效的,會顯示成一般文字的樣式。

沒有留言:

張貼留言