網頁

2012年10月11日 星期四

在 Blogger 上用 Google Code Prettify 顯示程式碼

blog 荒廢了好長一段時間,還是習慣 wordpress 裡面 rich editor 的寫作方式,但是實在是受不了自己 maintain 機器那種一陣子爆炸一次之後就再那邊焦頭爛額的慘劇,但 wordpress.com 裡面的客製化域名又是年費計算,感覺不太爽,所以索性把 blog 移到 blogger 上來。

遇到的第一個問題就是貼 code 的部份,印象中在 zeroplex 那邊有看過,本來跟他問是用什麼方法貼的,但三更半夜的誰有閒情逸致待在電腦前呢,大概只有 ㄐㄒㄈ資深工程師 還在公司埋頭苦幹吧?

Google 了一下看到了 在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼這篇文章,照著做也確實是可以運作的,而且當中的 background image 偷偷從 zeroplex 那邊偷了 base64 encode的 gif 直接藏在 template 中也挺方便, 不過 onLoad 放在 <body> 中會造成整頁一直卡住 Loading 的問題,會讓網頁速度拖慢,有點討厭。

剛剛又稍為找了一下發現在 stackoverflow 裡面的這篇解答提供了一個比較方便的解法,也不需要改動太多的 template code,作法如下:

先把自己想要的 Design 給選好,然後進到 Blogger 的 Design 頁面選[編輯HTML]在 <head> 後面貼這段:

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" language="javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>
然後進到 自訂->進階-> Add CSS,加入這段:

pre.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;
}
之後只要用 <pre class="code prettyprint">要顯示的 code</pre> 就可以顯示了。

Happy Blogging !

1 則留言:

  1. 將檔案用 base64 encode 內嵌的方法叫做 data URI,網路上有工具可以直接幫你轉換。

    http://webcodertools.com/imagetobase64converter

    回覆刪除