在痞客邦使用 SyntaxHighlighter 為程式碼上色

2015/06/02 更新
寫了一個 Pixnet 外掛，直接安裝就可以使用了
https://appmarket.pixnet.tw/#!/addon/787

---

由於編輯器和系統換行功能會被自動加上一些不必要的原始碼，所以要將設定修改如下：

1. [部落格後台] => [部落格管理] => [基本／進階設定] => [預設文章編輯模式] => [純文字模式]
2. [部落格後台] => [部落格管理] => [側邊欄位設定] => [頁尾描述] 下加入以下程式碼 (依據所需的語言加入，參考下方列表)

<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"/>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>

Brush name	Brush aliases	File name
Bash/shell	bash, shell	shBrushBash.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
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.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

3. 先進入 GUI 編輯器畫面撰寫完程式碼外的部分後存檔，再以純文字模式編輯文章補上程式碼部分。(第一次要先用 GUI 編輯器模式下存檔，否則要勾選 [不要系統自動換行，建議插入影音、表格、活動貼紙、dreamweaver語法時勾選。])

4. 在要使用程式碼的地方使用

<pre class="brush: html">
你的程式碼
</pre>

中間程式碼必須要進行 HTML Encode 之後，再貼進去以確保不會解析錯誤，可以利用我寫的線上工具 HTML Encode Online。

5. 可以從純文字模式切換到 GUI 編輯器，修改非程式碼部分，但不要從 GUI 編輯器畫面切換到純文字模式，否則內容會被修改掉。

延伸閱讀

修正 SyntaxHighlighter 單行與卷軸顯示問題