[blogger]利用 Google Code Prettify 顯示程式碼

另一個在網頁顯示程式碼的方式，透過 Google Code Prettify ，程式碼顯示變成簡單又美觀。

主要參考官網的 Getting Started 這篇文章，只要載入必要的 CSS 和 javascript ，就會自動尋找 <pre>, <code>, <xmp> ，處理美化程式碼。

Blogger 透過[版面配置]/[新增小工具]/[Html/JavaScript]，加入底下程式碼。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js></script>

還可以指定參數加入 skin 或 lang (skin=sunburst&lang=js)，支援的外觀可以在 Gallery of themes for code prettify 找到。

NOTE：在 script 標籤中指定語言會套用到所有的網頁，因此 Google Code Prettify 也支援利用 class 屬性 lang-* 的方式，來指明程式語言。

<pre class="prettyprint lang-java">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
<pre>

或採用 html5 ，在 code 標籤以 language-* 的 class 屬性，指明程式語言。

<pre class="prettyprint"><code class="language-java">
public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}
</code><pre>

如要顯示行號，要在 class 加上 linenums:no ，no表示要從第幾行開始，可不指定。

<pre class="prettyprint linenums:168">

和 CSS BLOCK 搭配

public class HelloWorld {

    public static void main (String[] args) {
        System.out.println("Hello, world!");
    }
}