我們在網站或者部落格上面分享文章，裡面有提到程式碼的時候，往往要花很多時間在幫程式碼關鍵字及特殊符號的部分上色提高可讀性，透過這個方式，只要在編輯HTML文件的時候，前後個加上一個標籤，Google Code Prettify 就會自動幫我們幫程式碼加入顏色了喔。
＜官方網站＞
http://code.google.com/p/google-code-prettify/
＜官方說明文件＞
http://google-code-prettify.googlecode.com/svn/trunk/README.html
＜安裝步驟1＞
http://code.google.com/p/google-code-prettify/downloads/list
＜安裝步驟2＞
在HTML文件中搜尋加入以下程式碼派段，一般來說可以加在</head>標籤前面
（要注意 prettify.css 和 prettify.js 這兩個檔案位置的路徑）
<link href="prettify.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="prettify.js"></script>或者簡單一點直接使用 Google 提供的線上檔案
<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>
＜安裝步驟3＞
在HTML文件中，找到<BODY>標籤，並且加入以下屬性
<body onload='prettyPrint()'>
＜安裝步驟4＞
把樣式表修改成自己喜歡的樣子（當然預設情況下不用修改就可以直接使用了）
＜使用方法＞
將在您要顯示的程式碼片段填入下面的標籤之中
（若是部落格線上編輯的話記得一定要切換成HTML模式喔！）
<pre class="prettyprint">
這裡放您想要顯示的程式碼片段
</pre>
基本上這樣子就大功告成，例子就像我們這一篇文章顯示的樣子。
＜Blogger部落格的使用方法＞
當然以上是一般HTML文件修改的方式，如果是部落格呢？那就要看各家部落格是否有提供自訂樣式的功能了，以本部落格Blogger來說，附上設定及程式碼修改的貼圖。
＜注意事項＞
要注意的是比較麻煩的地方，這是關於HTML語法的規定，就是如果文件當中有用到關於HTML自己專屬的某些關鍵字標籤會讓瀏覽器顯示異常，就是當您要在網頁顯示HTML語法的時候，您不能把像是 < 和 > 這種標籤直接寫在HTML文件內，而要使用代碼，他才會真正去顯示 < 和 >
關於HTML語法中詳細的解釋請參考我的另一篇文件
還有本部落格Blogger的系統，如果再使用了 Google Code Prettify ，要注意在部落格線上直接編輯的時候，右邊欄位的選項內，有一個：「撰寫模式」記得修改成「按照字面顯示HTML」
這樣當您把想要表現出來給別人看的HTML程式碼，才不會又被拿去給瀏覽器翻譯而造成顯示異常的情形發生了！
沒有留言:
張貼留言