在 Blogger 使用 Google Code Prettify 程式碼美化區塊筆記

Google Code Prettify 是一個簡單易用的程式碼高亮度顯示程式。

• 支援支援多種程式語言
• 僅需載入一個檔案
• 可以自訂修改樣式

以下簡單示範如何在 Blogger 設定使用 Google Code Prettify。


Step 1: 加入 Google Code Prettify 語法支援設定

請先到網誌的版面配置頁面，如下圖：

拉到該畫面最下方，選擇任意一個新增小工具。

選擇加入 HTML/JavaScript 小工具。

在小工具中打上標題，在內容中貼上程式碼，並按下儲存按鈕，這樣就完成了設定。如下程式碼與圖例：

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

Step 2: 在文章中貼上程式碼

在撰寫新文章時選擇 HTML方式撰寫程式碼。

接著在撰寫網誌原始碼的地方以 <pre> 標籤範圍內撰寫或貼上程式碼。如下：

<pre class="prettyprint">
<code class="language-html">
你的程式碼...
</code>
</pre>

要特別注意的是，如果程式碼有 "&"、"<"、">" 這三個符號，需將 "&" 轉換為 "&amp;"、"<" 轉換為 "&lt;"、">" 轉換為 "&gt;"；若覺得麻煩，也可使用些線上轉換的小工具 Online HTML Encode/Decode 轉換完後再貼上。


Step 3: 變更程式碼顯示樣式

Google Code Prettify 提供幾個程式碼的顯示樣式(Skin Gallery)，只要回到 HTML/JavaScript 小工具，編輯原本貼上的程式碼，加上 skin 參數，並指定想顯示的 skin 名稱即可。使用方式如下：

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

如果想在程式碼區塊顯示行號，需要在 <pre> 標籤的 class 屬性中加入 linenums 的樣式，如下：

<pre class="prettyprint linenums">
<code class="language-html">
你的程式碼...
</code>
</pre>

若想要在程式碼區塊的每一行都顯示行號，可以在 HTML/JavaScript 小工具加入以下 CSS 程式碼：

<style type="text/css">
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 { list-style-type: decimal !important }
</style>

如果 Google Code Prettify 的樣式你不喜歡，而你也很熟悉 CSS，也可以參考 Google Code Prettify 提供的樣式進行些微調。

就醬囉~