[Blogger] 如何在 Blogger 顯示程式碼 - Google Code Prettify

前言

過去在撰寫技術文章時，往往文章的內容都會附上簡單的 sample Code 方便說明
但搬到 Blogger 之後發現似乎沒有內建的功能可以使用，點部落是內建的只是我忘記密碼 XDD(眼神死
在網路搜尋各種解決方案後，發現大家推薦 Google Code Prettify，原本 Google Code Prettify 是放在 Google Code，但後來釋出放在 Github 上，這邊文章記錄一下如何套用

設定 Script 

放置 Google Code Prettify script 到 blogger 網頁上，以下兩種方式都可以達到目的

• 新增 HTML / Javascript 

     1. 開啟 blogger 後台，點選左邊選單的 版面配置
     2. 點選右方的新增小工具，選擇 HTML / Javascript
     3. 在 HTML / Javascript 內容，貼上下列語法

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

• 主題 

     0. 修改主題會影響到 blogger 網頁配置，建議不了解 HTML 語法的人用前步驟即可
     1. 開啟 blogger 後台，點選左邊選單的 主題
     2. 按下編輯HTML，在 HTML Body 前貼上語法
     3. 儲存主題 

使用方式
將要放置的程式碼 放置在下列兩者語法之間，即可完成

<pre class="prettyprint">your code...</pre>

<code class="prettyprint">your code...</code>

Google Code Prettify 會自動的 render 出顯示原始碼的 style 畫面


其他 

• 支援不同 skin : Google Code Prettify 支援不同的 skin，可以選擇自己喜歡的顏色 style
• HTML Encode : 部分程式碼是需要 HTML Encode 轉換才能正常呈現，如有類似需求可以點 此連結

參考
google/code-prettify
[Blogger] Google Code Prettify 顯示程式碼
Gallery of themes for code prettify