2010年9月15日 星期三

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的保留字。

沒有留言: