使用Google Code Prettify來顯示程式碼

這邊網路上可以找到不少的參考資料，但為了自己方便尋找，所以就根據參考來源，備份一份資料。

參考來源：
1.優力歐不眠夜[在 blogger 中加入 google-code-prettify]
2.Google-Code-Prettify


I.設定：
使用方式如下：
1.登入網誌後台後選擇『範本』->『修改HTML』

2.在HTML內找到</head>，並將下列程式碼貼在</head>的前面。

<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>

3.然後在body標籤內加上onload='prettyPrint()'。
(參考資料是利用<script>prettyPrint();</script>; )

4.存檔後，就可以用了。


II.如何使用：
之後如果在文章內需要貼程式碼時，就需要在HTML模式下，加入下面的語法。

<pre class="prettyprint lang-*">
//要顯示的文字
</pre>

「*」表示要用來顯示的語言類型，定義請參考How do I specify the language of my code?


III.實作範例：
用起來的感覺會像是底下這樣（用C++作範例)
[HTML語法]

<pre class="prettyprint lang-cpp">
class MyClass
{
    private:
        int Counter;
        std::vector&lt;int&gt; mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

[顯示畫面]

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

在要顯示的程式碼內，如果有要用到「<」、「>」，要記得，一定要換成HTML裡面用的「&lt;」及「&gt;」。不然會變成一片空白嚕。


IV.行號顯示：
如果要顯示行號的話，就要在原本的lang後面加上linenums即可。
[HTML碼]

<pre class="prettyprint lang-cpp linenums">
class MyClass
{
    private:
        int Counter;
        
    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

[顯示畫面]

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

如果在顯示區間內所顯示的程式碼是從原先的程式碼的第100行開始，就可以在linenums後面加上分號以及開頭的行號數值，這樣prettyprint就會把目前這段程式碼應該所在的行號標出來了。
[HTML碼]

<pre class="prettyprint lang-cpp linenums:100">
class MyClass
{
    private:
        int Counter;
        
    public:
        MyClass(void);
        
    public:
        void Show(void);
}
</pre>

[顯示畫面]

class MyClass
{
    private:
        int Counter;
        std::vector<int> mCountList;

    public:
        MyClass(void);
        
    public:
        void Show(void);
}

不過目前google code prettify在顯示行號上，就只會顯示(行號 Mod 5 == 0 &&行號 > 0)的行數的行號嚕。


雖然用起來有點麻煩，但是顯示上看起來還算可以嚕。
如果覺得上面的方法太麻煩，還有現成的網頁工具可以用，Source Code Formatter for Blogger, Blogspot , Blog & Blogging, Format Formatting Tool。
好處是，他可以幫你解決符號轉換的問題，也可以顯示每行的行號，缺點是，就沒有顏色了。XD