allen0818 的部落格

有需要記錄程式相關文章的朋友，相信免不了需要在文章中貼上程式碼以做相關說明或記錄之用
那麼要如何在文章中貼上漂漂亮亮讓人看得比較舒服的程式碼呢?

除了有名的syntaxhighlighter外，也可以參考看看Google所提供的輕量化外掛套件Google Code Prettify
以下以痞客邦為例來說明如何設定Google Code Prettify:

1. 首先，先到痞客邦的[後台管理] -> [側欄管理] -> [頁尾描述]，接著請在其內容處貼上以下的程式碼片段

<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=desert"></script>

(標題的部份可以任意打沒關係)
這樣即可在文章中載入google-code-prettify所需的javascript及相關的css檔
其中skin=xxx為官方所提供的各種面板，可把xxx換成自己喜歡的面板樣式，有關官方提供的面板可參考這個連結

2. 接下來在自己編寫的文章中，有關程式碼的部份用以下的方式包裝起來:

(1) 將正在編寫的文章先切到[原始碼]區塊
(2) 有關程式碼的部份用<pre class="prettyprint> 程式碼片段 </pre>的方式包起來
　　(如有需要先將程式碼內容做encode的話可以先到HTML ENCODE這個網站來做)
如此一來即可以讓程式碼以高亮語法顯示囉，呈現效果如下:

public class HelloWorld {

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

使用起來可說是相當簡單!
不過有關行號顯示的部份我試了一下還是沒辦法順利呈現...希望知道怎麼樣設定的朋友可以幫幫忙跟我說一聲QQ
感激不盡 哈

參考資料:

1. 使用Google Code Prettify漂亮顯示讓程式碼自動分辨顏色
2. 使用 Google Code Prettify + CSS Block 在網頁中嵌入顯示程式碼
3. 如何在網頁中嵌入顯示程式碼：Google Code Prettify
4. 在 Blogger 上用 Google Code Prettify 及 GitHub Gist 顯示程式碼
5. HTML ENCODE