在 blogger 上使用 syntaxHighlighter (含安裝)

考慮到筆者之後可能張貼有關 R, perl, python, javascript, CSS, HTML 等語言的程式碼。為了方便閱讀起見，於是採用的似乎廣受歡迎的 syntaxHighliter。它是 Alex Gorbatchev 在2004年開發的開源碼客戶端 javascript。

安裝方式：
1. 在 Blogger 的後台，打開「設計」、「修改HTML」。
2. 輸入 CTRL+F 找到 </head>
3. 複製底下程式碼

4. 將這些程式碼貼在 </head> 之前
5. 預覽結果，如果沒有錯誤，儲存離開。

基本使用方法

---

利用 <pre> 與 </pre> 標籤，將想要 highlight 的程式碼安插其中。利用 brush 指定對應的程式語言。請見此網頁參考更多的 brush 以及對應的別名 (aliases)。

<pre class="brush:js">
function helloWorld() {
  alert('Hello World!') ;
}
</pre>

進階使用方式

---

透過參數，我們可以調整畫面顯示的感覺。底下提供一些好用的參數：


摺疊程式碼

<pre class="brush: js; collapse: true">

</pre>

關閉超連結

<pre class="brush: js; auto-links: false">

</pre>

部分 highlight

<pre class="brush: plain; highlight: 2">

</pre>

<pre class="brush: plain; highlight: [1, 3]">

</pre>

gutter - 開啟/關閉行數的顯示(line number)

<pre class="brush: php; gutter: false;">

</pre>

關閉 toolbar (移除右邊的?小綠點)

<pre class="brush: php; toolbar: false;">

</pre>

HTML無法正確顯示 & 風格 styling

---

<pre class="brush:html"> 和 </pre> 之間的 HTML 無法正確地顯示在 blogger 上。解決問題的方法之一是使用 Format My Source Code for Blogging 等線上工具，用跳脫字元取代使 blogger 解譯錯誤的部分。再將轉出的編碼資料改由 SyntaxHighlighter 處理。步驟如下：

1. 不要勾選「Embed Stylesheet」選項進行「Format Text」
2. 將 <pre class="source-code"> 標籤替換成 <pre class="brush: html">。
3. 移除前後的 <code></code> 標籤(如果沒有移除， 則 <code>< /code> 標籤會一併出現在畫面上)。

關於佈景主題，syntaxHighlighter 目前提供了七種，而筆者比較喜歡 RDark theme，於是將它取代了原來的 shThemeDefault.css。想參考更多佈景主題可以見此網頁。

方法是將當初安裝在 blogger 上的這行程式碼

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

換成：

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>

---

相關閱讀
玩物尚誌 ─ Blogger加掛SyntaxHighlighter，顯示漂亮的彩色程式碼
cyberack ─ Adding a Syntax Highlighter to your Blogger blog