[Blogger] 替程式碼上色

這邊筆記一下如何在 Blogger 中加入程式碼並 Highlight，有兩種方法，分別為 Google Code Prettify 與 SyntaxHighlighter。

首先先介紹 Google Code Prettify，進入你的 Blogger -> 設計 -> [版面配置]，按下 [新增小工具]，選擇新增 [HTML/JavaScript]，然後在小工具中貼入以下程式碼：

<style type='text/css'>
/* 程式碼高亮設定 */
/* Main Box */
.pre-highborder{
    border: 1px solid #ff0000;
    padding: 3px 3px 3px 0;
}
pre.prettyprint, code.prettyprint {
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    padding: 5px;
 overflow: auto;
    background-color: #eee !important;
    color: black;
    box-shadow: 0 0 5px #999;
    -moz-box-shadow: 0 0 5px #999;
    -webkit-box-shadow: 0 0 5px #999;
}
/*font*/
pre span, code span {
    font-family: 'Consolas', 'Courier New', 'Microsoft JhengHei', sans-serif !important;
    font-size: 12px !important;
}
/*each line*/
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
    margin: 0 !important;
    padding: 2px 0 2px 4px !important;
    list-style-type:decimal !important;
    border-left: 1px solid #999;
}
/*even line*/
li.L1, li.L3, li.L5, li.L7, li.L9 {
    background-color: #f6f6f6 !important;
}
/*odd line*/
li.L0, li.L2, li.L4, li.L6, li.L8 {
    background-color: #FFF !important;
}
/*line-number background color*/
ol.linenums {
    background-color: #eee;
    margin-left: 10px;
}
</style>

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

　　這樣就完成了。之後當想插入程式碼時，就在文章編輯器中以 HTML 模式編輯並加入 <pre></pre> 成對標籤即可：

<pre class="codeblock linenums:1">
    中間可以插入你想放入的程式碼
</pre>

　　如果想要替程式碼上色，只需要改成輸入：

<pre class="codeblock prettyprint linenums:1">
    中間可以插入你想放入的程式碼
</pre>

　　Google Code Prettify 會自動替你的程式碼上色，如果想要指定語言，可以在 prettyprint 後面加入 lang-* 參數來指定語言，假設我現在有一段 Java 程式碼要上色：

public class HelloWorld {

    public static void main (String[] args) {

        System.out.println("Hello, world!\n");

    }

}

======================= 我是分隔線 =======================

再來介紹 SyntaxHighlighter，首先一樣進到 Blogger 的設計頁面，然後點選 [範本] -> [自訂 HTML]，，用 Ctrl + F 搜尋「</head>」並複製下列 Code 貼上並儲存：

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
 
<script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->

注意的是，第二行中的 shThemeDefault 表示模板樣式，如果想要更換模板，可以參考下表或官方網站：

表 1 模板樣式

模板名稱	檔名
Default	shThemeDefault.css
Django	shThemeDjango.css
Eclipse	shThemeEclipse.css
Emacs	shThemeEmacs.css
Fade To Grey	shThemeFadeToGrey.css
Midnight	shThemeMidnight.css
RDark	shThemeRDark.css

至於第五行中的 shBrushJava.js 表示為 Java 語言，如果想要加入其他語言，就必須加入其他的 shBrush，支援語言如下表或參考官方網站：

表 2 SyntaxHighlighter 支援語言列表

語言名稱	指定縮寫	檔名
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

最後加入程式碼的方法與 Google Code Prettify 相同，到文章的 HTML 編輯模式中使用：

<pre name="code" class="brush: java;">
    .. Your Code Here ..
</pre>

舉例來說，一樣以相同的 Java Code 作展示：

public class HelloWorld {

    public static void main (String[] args) {

        System.out.println("Hello, world!\n");

    }

}

需要注意的是，再把程式碼放入 HTML 編輯器中，記得要先將程式碼做 HTML Encode 的動作，否則可能會因為特殊字元或標記造成程式碼顯示錯誤。HTML Encode 的方式可以利用線上的 Converter 或是參考使用筆者所撰寫的 HtmlCodeConverter.exe 小程式，這邊舉幾個比較常見的 Converter：

1. Offline : HtmlCodeConverter.exe
2. Online  : mothereff.in
3. Online  : Web2Generators
4. Online  : OpinionatedGeek
5. Online  : string-functions

另外，因為本篇操作方法是利用 JavaScript 做處理，因此若是瀏覽器不支援 JavaScript 或是利用手機版來檢視 Blogger 會發生上色失效的狀況。