[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

Related Posts:

• [Tool] URL Render - 搜尋清單直接預覽網頁內容前言 相信大家一定有使用過 Google 搜尋引擎的經驗，當輸入完關鍵字之後會出現符合關鍵字的網址清單，有些人會逐一地點進去網址看網頁內容是否對自己有幫助，如果不是在關掉繼續往下一個目標前進；也看過同事是直接挑有興趣的幾個網頁每個開新視窗的方式，但視窗開多了勢必會消耗記憶體容量，且不是每台筆電配備都是高規格搭配 i7 16G 的硬體，最近發現一個好用的 Google 套件叫做「Url render」可以在 Google 搜尋清單直接預覽網頁內容，… Read More
• [Blogger] 如何在 Blogger 顯示程式碼 - Google Code Prettify前言 過去在撰寫技術文章時，往往文章的內容都會附上簡單的 sample Code 方便說明 但搬到 Blogger 之後發現似乎沒有內建的功能可以使用，點部落是內建的只是我忘記密碼 XDD(眼神死 在網路搜尋各種解決方案後，發現大家推薦 Google Code Prettify，原本 Google Code Prettify 是放在 Google Code，但後來釋出放在 Github 上，這邊文章記錄一下如何套用 設定 S… Read More