Google Code Prettify 是一套幫程式語法上色的工具、用法非常簡單、只要引用他的CSS和javascript之後、再把要上色的程式碼用<pre class=”prettyprint”>的標籤包起來，最後別忘了在body的標籤內加上 onload=”prettyPrint()”就可以了
Step1
下載並解壓縮Google Code Prettify
下載位置
Step2
引用 CSS 和 JavaScript：
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js">或是利用底下路徑同時載入CSS及JavaScript
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">Step3
標記程式碼
prettify.js支援<pre>, <code>, 和<xmp>三種標籤。只要用其中一種將程式碼包起來、並設定class=”prettyprint”就可了
程式碼當中若有 < 符號，記得轉換成特殊字元 <
<pre class="prettyprint">
你的 code 放這邊!
</pre>利用<pre>或<code>及class將有需要上色的字串、註譯包起來
<pre class=prettyprint>
int x = foo(); /* This is a comment This is not code
Continuation of comment */
int y = bar();
</pre><pre>, <code>, 和<xmp>同時具有等寬字型的特性。
<code>用來表示原始碼，
<pre>和<xmp>則是定義預格式化的文本。不過在html5的語言中，<xmp>已經完全遭到刪除、因此不建議使用。而<pre>則是可以保留空格和換行符號因此在使用上比較方便。
Step4
呼叫函數
prettyPrint(); 可以放在body 裡面
<body onload="prettyPrint();">也可以放在要引用的程式碼之後
<script>
prettyPrint();
</script>Step5
換個樣式
prettify.js 還有其他不同的樣式，可以在 skin gallery 找到。
當然您也可以自訂一個自己喜歡的樣式。
行號提示
pre 的 class 加上linenums，就可以有行號提示的效果。google code prettify的行號提示以5行為一個單位。
<pre class="prettyprint linenums">
多行程式碼
A();
B();
C();
D();
E();
F();
G();
H();
</pre>在linenums後加上:數字還可以指定開始的行號、如果原始碼比較長、需要分段時，指定開始的行號是一個不錯的方法。
<pre class="prettyprint linenums:4">
這是第4行，linenums:4
A();
B();
C();
</pre>上面原始碼呈現的效果如下：
這是第4行，linenums:4 A(); B(); C();
若是希望每行都有提示，那就加上底下的 CSS 設定
<style>
.prettyprint.linenums ol li,
pre.prettyprint.linenums ol li {
list-style: decimal;
}
</style>
.prettyprint.linenums ol li,
pre.prettyprint.linenums ol li {
list-style: decimal;
}支援瀏覽器：IE 6, Firefox 1.5 & 2, Safari 2.0.4.
如果想要看看您的瀏覽器是否支援Google Code Prettify，可以試試測試頁面
套件名稱：google code prettify
套件網址：https://code.google.com/p/google-code-prettify/
樣式主題：http://google-code-prettify.googlecode.com/svn/trunk/styles/index.html
下載網址：https://code.google.com/p/google-code-prettify/downloads/list
測試頁面：https://google-code-prettify.googlecode.com/svn/trunk/tests/prettify_test.html
One Comment