讓 Blogger 裡的程式碼範例可以水水的（Format Sample Codes in Blogs）

Google 做了很多無聊有趣的東西，今天為了 Blogger 裡老是醜醜的程式碼研究了一下，找到了這個 google-code-prettify，可以讓 Blog 裡的程式碼範例從地獄升上天堂。

地獄版

天堂版

哇咧，這是 Eclipse 上身了嗎！


簡單三個步驟：

1. 先去下載 google-code-prettify，解開後可以找到 prettify.js 與 prettify.css 兩個檔案。
2. 然後在 Blog 文章最後面加上以下的語法（用 HTML 編輯模式），第一行的三個橫線是故意的，因為是放在最後，預防不小心編輯文章時 Blogger 順手殺掉看不到的 tag，就是在說 script 和 style，所以千萬不要將游標移到三條橫線之後，不然又得重貼一次。
   

   ---
   <script type="text/javascript">
   <!--
   // 將 prettify.js 內容全部貼到這裡
   prettyPrint(); // 再加上這個呼叫
   -->
   </script>
   <style type="text/css">
   // 將 prettify.css 內容全部貼到這裡
   </style>

3. 最後將程式碼範例放到<pre class="prettyprint">...</pre>裡，就上天堂了

   <pre class="prettyprint">
   // 程式碼在這
   </pre>
   

除了基本的功能外，還有一些機車進階的功能。

預設 google-code-prettify 會去猜是哪一種程式語言，如果不放心，可以手動指定，支援的範圍超出想像。

<pre class="prettyprint lang-html">
// 程式碼在這
</pre>

想要加上行數顯示嗎？沒問題！

<pre class="prettyprint linenums">
// 程式碼在這
</pre>

不是從第一行開始？機車的需求總是沒完沒了！

<pre class="prettyprint linenums:38">
// 程式碼在這
</pre>

---