在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>

結果如下: