【Blogger】在 Blogger 文章中顯示程式碼 - CSS Block 及 Google Code Prettify ~ 萊恩的隨手筆記|Ryan's Notebook

【Blogger】在 Blogger 文章中顯示程式碼 - CSS Block 及 Google Code Prettify

Google Code Prettify 是由 Google 開發出來的程式碼上色工具，已被大量運用在 Google Code 的網站上，對網頁不會有很大的負擔。而 CSS Block 的語法，也很多人用，二者可以單獨使用，也可以合併使用。

首先是 Google Code Prettify 的設定：

1. 請在Blogger後台管理介面找到 "範本" 的頁籤，若是舊版介面，則是 "設計" 頁籤。

2. 點選 "修改HTML" , 按 Ctrl + F 出現搜尋框，一般而言，在不同瀏覽器會出現搜尋框的位置不太一樣，IE是在左上方，Chrome是在右上方。

3. 在搜尋框裡鍵入 </head>，並複製下面的程式碼放在</head>之前。

4. 找到 <body ，並加入 onload='prettyPrint();' ，如下方程式碼。

public class HelloWorld {

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

5. 請在文章的HTML編輯畫面裡輸入下方的程式碼。

　　輸入想顯示的程式碼

注意：
如果程式中有角括號等會影響 html 顯示的字元，
得先用 Html Encode 工具將程式轉換。

接下來是 CSS Block 的設定：

6. 請在 "修改 HTML" 裡找到 /* Post 。

7. 貼上下方的程式碼。

8. 請在文章的HTML編輯畫面裡輸入下方的程式碼。

CSS Block + Google Code Prettify 的設定：

9. 請在文章的HTML編輯畫面裡輸入下方的程式碼。

上面三種方式都可直接在該說明的程式碼區看到顯示結果。

參考資料：

Header Background