在網頁中嵌入顯示程式碼：Google Code Prettify
全系列顯示效果比較已完成，可參考：
在網頁中嵌入顯示程式碼：全系列效果比較及教學整理，
選擇自己較想要的效果後再進入單篇文章看每種外掛的設定教學。
在上一篇 在網頁中嵌入顯示程式碼：CSS Block 中，
我們介紹了如何使用 CSS 的效果來顯示程式碼區塊，
然而和這系列第一篇的 HighLight 軟體 效果比超來，
就少了將程式碼上色的功能，程式看起來比較不清楚。
這篇我們要介紹的是 Google Code Prettify，
這是由 Google 所推出，且已大量運用於 Google Code 網站的輕量語法上色工具，
如果讀者曾經使用 Google API 開發程式，相信對他所產生的程式碼顏色一定很熟悉，
因為這此顏色都是同一套程式所產生的。
今天一樣透過他，我們就可以將文章中的程式碼語法上色，
且設定上也非常簡單，以下就是安裝步驟。
(2013.11.01更新)
先前的舊版程式碼需放在 html裡面，且需要呼叫 onload 影響網頁載入
現在建議放在HTML/JavaScript小工具裡比較方便管理，而且程式也變簡捷了！
以下這一行取代了先前的步驟一、二，接下來直接看步驟三即可~
<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
舊版步驟一：在 blogger template 中的 <head> 和 </head> 間插入以下語法
<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' type='text/css' rel='stylesheet' /> <script type='text/javascript' src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js'></script>
舊版步驟二：在 blogger template 中搜尋到 <body，並修改為：
<body onload='prettyPrint();'>
新舊版步驟三：在要顯示的程式碼用 pre 和 class='prettyprint' 包住，如下列方式：
<pre class="prettyprint">
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
</pre>
其顯示效果為：
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
上一篇的 CSS Block 也可以和這篇結合，在完成 CSS Block 設定後，
只要在顯示程式碼的地方把 class 加 CSS Block 的 class，如：
<pre class="codeblock prettyprint">
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
</pre>
顯示的結果便會像這樣，是不是很不錯呢？
public class HelloWorld {
public static void main (String[] args) {
System.out.println("Hello, world!");
}
}
關鍵字：程式碼, 顯示, 網頁, 文章, 內嵌, 嵌入, 放入, 部落格, blog, blogger, css, 語法, 上色, 推薦, 教學
參考資料：
