在 Blogger 上面使用 SyntaxHighlighter 顯示程式碼

網路上相關的資料很多，而且雜七雜八的都不一定正確，弄了好久終於成功，在此記錄一下。

SyntaxHighlighter 官網：
http://alexgorbatchev.com/SyntaxHighlighter/

我看到目前為止比較好的設定教學：
http://www.cyberack.com/2007/07/adding-syntax-highlighter-to-blogger.html

大致上的概念就是要在 blogger 的範本 html 裡面加入 SyntaxHighlighter 相關的 java script 網址才能正常顯示程式碼。
以前的做法是，先到官網下載 SyntaxHighlighter，然後找個網路上傳空間把其中幾個必要的檔案丟上去，之後在 blogger 的範本 html 裡面指向你上傳的網址即可。
但是現在官網提供一種 hosted version，也就是你不用下載檔案，官網直接提供網址，你只要在 blogger 的範本 html 裡面指到官網提供的網址即可。不過缺點是程式碼在 blog 上顯示的時候可能會比較慢一點。
在此記錄的是 hosted version 的方式。

Step 1

Step 2

Step 3

接著在 html 裡面尋找 </head> 標籤，並在 </head> 標籤之前填入以下內容：

Step 4

範本的部分這樣就大致上設定完成了。比較需要注意的是，如果套用不同的範本，上面的動作應該要再做一遍。
想在 blog 文章中加入程式碼的話就要先切換至 html 編輯模式，並且將程式碼放在 <pre> 與 </pre> 之間即可：

<pre class="brush:cpp">
C++ 程式碼放在這裡!!
</pre>

<pre> 與 </pre> 標籤之間放哪一種語言的程式碼，則 brush 就要設定對應的值。至於 SyntaxHighlighter 支援的 brush 到底有哪些，可以參考：
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

這樣就大功告成了！