改善Google Blog 顯示程式碼的簡單方案 Google Code Prettify + CSS

今天明明是巴巴節,
我卻很不孝的跑去參加Node.js Taiwan Party 13
沒想到現場來的還是不少人呀XDD

離題了...
話說今天很害羞的被看到年久失修的網誌
實在忙到寫一堆草稿都沒發
後來Louis 問了我怎麼讓程式碼在blog裡顯示出來的時候
小弟真是慚愧
其實之前很刻苦的用區塊在自己加上css在美化的 囧!

今晚一回家趕快找估狗大神幫忙
好在找到一篇
在 Blogger 文章中利用 CSS Block 及 Google Code Prettify 顯示程式碼

文章使用了Google Code Prettify 這個語法上色工具
並利用css來修改美化整個區塊

咱們就來嘗試看看

首先要在網誌的範本區塊修改HTML

並在head標籤內貼上下方語法

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript">
</script>

這邊是載入google code prettify的svn來使用
為了要使它運作
必須要body標籤內插入

onload='prettyPrint();'

最後在需要顯示為程式碼的地方用 pre 標籤包起來並賦予class

<pre class="prettyprint code">
   輸入想顯示的程式碼
</pre>

就能夠讓程式碼變顏色囉
最後我們可以利用修改css來增加框線及背景色
以下是我自己在用的css

.post .code { 
  display: block; 
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f3f3f3;
  border: 1px solid #ddd;
  padding: 10px 10px 10px 21px;
  line-height: 1.2;
  border-radius:3px;
}