在Goolge部落格用google code prettify讓程式碼在網頁中區隔

常常在別人的部落格內看到程式碼會有方框來做為區隔，這樣可以讓瀏覽更直覺。
本來想自己寫CSS來達成功能，沒有到早就有這樣的功能可以套用。
在看了一些方法之後，我自己選擇google code prettify來使用，原因是簡單、簡潔。


進入Blog之後，選擇功能的「版面配置」，再點選「新增小工具」

在「新增小工具」中選擇「基本」，往下尋找到「HTML/JavaScript」

標題隨便打，主要在內容輸入下列的程式碼，這樣開啟網頁時，就會自動載入JavaScript的檔案。
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

2016年8月發現上述連結已失效，改為下列語法：
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>

原始碼也公開在 GitHub上，網址： https://github.com/google/code-prettify

完成上述設定之後，如果要讓程式碼顯示在方框內，則加上<pre class="prettyprint">標籤

範例如下：
<pre class="prettyprint">
select  vs.sid,vs.serial#,vp.spid,vs.module,vs.action,vtu.username,sum(vtu.blocks)*8/1024
    from V$TEMPSEG_USAGE vtu,v$session vs,v$process vp
    where vtu.session_num=vs.serial#
        and vtu.session_addr=vs.saddr
        and vs.paddr=vp.addr
        and vs.sid >10
    group by  vs.sid,vs.serial#,vp.spid,vs.module,vs.action,vtu.username
    order by sum(blocks)*8/1024 desc;
</pre>

結果如下：