如何在Blogger文章內嵌入程式碼區塊？

1. 前言

方法主要是參考這篇介紹： [Blogger] 如何在 Blogger 顯示程式碼 - Google Code Prettify ~ m@rcus 學習筆記，貪圖它方便。安裝方法就省略了。

其實直接看原始專案說明也很清楚： GitHub - google/code-prettify: Automatically exported from code.google.com/p/google-code-prettify

本站目前就先採用這個方法來把程式碼嵌入到文章裡。

2. 使用方法

操作方法很簡單，就是在後台編輯HTML，直接把程式碼區塊插入為具有 class="prettyprint" 屬性的 pre 或 code 元素即可：

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>

如上，若覺得有需要，可以加入 lang-XXXX 來指定程式語言。但其實 Google Code Prettify 會自動猜測。當然更可以依照嚴謹的 HTML 5 規格，用pre把code包起來，然後在code標籤內指定語言種類：

<pre class="prettyprint"><code class="language-java">...</code></pre>

3. 預先HTML轉碼

但是！某些程式碼可能要先經過HTML Encoding才能正常顯示。線上轉換：
HTML編碼 - 在線HTML編碼器 或者 HTML Encoder :: OpinionatedGeek

4. 其他備用方案

不過為了怕這個 Google Code Prettify 專案中止或與Blogger無法完全相容，還是打算找一些備案，先列在這裡備忘：

備案1： A.D.的程式筆記: 『其他』如何在Blogger文章顯示程式碼
備案2（還真的有點麻煩）： [技術分享] 寫給會在部落格中撰寫程式碼的你 ─ 在網頁中嵌入高亮程式碼上色 (syntax highlighting) ~ PJCHENder 那些沒告訴你的小細節