Blogger修改版面,安裝Google code prettify

修改版面，改用Blogger的新功能，
範本設計工具，可以簡單的修改版面配置跟寬度，
只是沒有原先用的minima dark的範本，
所以又東弄弄西弄弄把版面弄成跟原先不要差太多的style...

其實一開始我是想貼code上來，
弄好Google code prettify之後發現我的版面稍微窄了點，
要修改又工程浩大，所以用範本設計工具更換了版面，
但是寫出來會照著順序寫XD


接著，
因為要貼code所以找來這個Google code prettify，
呈現效果不錯咧...
不過如果可以直接弄成widget會更好，
在editor這邊有個對應的按鈕，這樣我就不用自己手動key tag進去= =

reference:

1. Google Code Prettify
   http://sls.weco.net/blog/rjrsjajawhu/26-dec-2008/11929
   
2. Blogger code prettifier
   http://pkario.blogspot.com/2010/04/blogger-code-prettifier.html
   
3. tune-google-code-prettify-for-blogger
   http://sandrotosi.blogspot.com/2010/03/tune-google-code-prettify-for-blogger.html
   

作法有兩種，一種是直接包進Widget並把所有修改放在Widget裡，
另外還有作法是修改template，看是要把code放在template裡，
或是外部link到google的svn server上，
但是考慮到維護的方便性，以及減少外部連結增加效率，
所以我採用第一個做法，合併上述文章中提到的作法...

Step:

• 首先下載最新的google-code-prettify
  http://code.google.com/p/google-code-prettify/downloads/list
  分別有prettify-21-Jul-2010.zip與prettify-small-21-Jul-2010.zip，
  兩個都要下載並解壓縮。
• 開啟prettify-21-Jul-2010.zip中的prettify.js，
  以及prettify-small-21-Jul-2010.zip中的prettify.cs，
  建議用Notepad++，比較不容易造成不必要的錯誤
• 開啟Blogger的後台，設計→網頁元素→找個位置新增小工具
  基本→Html/Javascript
• 貼上下面的片段，不過為了方便也可以在編輯器上處理好再貼

  <style type="text/css">
  ===>插入prettify.css的內容 <===
  </style>
  
  <script type="text/javascript>
   ===> 插入prettify.js的內容，注意不能使用壓縮過的版本 <===
  </script>
  

• 接著，由於我的版面是以黑色為底，預設的配色會造成某些字看不到，所以要再修改一下，
  在上述的片段之後再貼上這段。
  

  <style type='text/css'>
  .pln { color: #C0C0C0; }
  .kwd { color: #4169E1; }
  .tag { color: #4169E1; }
  </style>
  

• 最後，貼上這段載入prettyPrint()，
  大多的教學是把這段放在body的onload event，
  但既然包到gadget裡了，那就一起吧:)
  

  <script>prettyPrint();</script>

基本上這樣就完成了，
但是因為是gadget所以會多一塊東西在畫面上，
為了美觀，所以我把上述的code藏在授權的gadget裡面:)

使用上也很單純，編輯文章時...

<pre class="prettyprint">
Post your Dirty code hereeeeeee...
</pre>

Try it!

PS.如果是特殊的code style請另外增加對應的檔案，作法請參照參考連結2。

貼上Html或css，JS等，
如果文章中有包含<、>、&等符號，需先更換為&lt;、&gt;、&amp;
因這幾個字元是html的保留字。