Syntax Highlighter with PIXNET－生活學習筆記

本文引用自mistech - 痞客邦 PIXNET 使用 Syntax Highlighter 顯示程式碼

試過其他的方法，但是比較喜歡Syntax Highlighter
下方的文章都是引用來的，留著也是為了紀錄，另外自己的話會用底色標記

Syntax Highlighter 可以讓讓程式碼 coding program 在網頁上被明顯的呈現出來，這是一套免費的軟體；雖然官方網站提供 Syntax Highlighter下載，可是痞客邦 PIXNET 無法上傳這些檔案，所以我們只好使用Syntax Highlighter官方網路線上的引用的方式來使網頁呈現程式語法效果。

作法很簡單，依序下列的步驟就可以達到我們想要的目的：

1. 進入痞客邦 PIXNET 管理後台，選擇管理後台的部落格。

2. 然後在部落格管理的＂側邊欄位設定＂增加一個名為 JS 的側欄，為了網頁美觀建議放在側欄最底部。

3. 在 JS 側欄增加下列的內容


<!-- Include at least the core style and default theme --> <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" /> <!-- Include required JS files --> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script> <!-- At least one brush, here we choose JS. You need to include a brush for every language you want to highlight --> <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/shBrushXml.js"></script> <!-- Finally, to actually run the highlighter, you need to include this JS on your page --> <script type="text/javascript">SyntaxHighlighter.all()</script>

4. 再加入你使用的程式語言，例如C#，如下程式碼
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>

像是我用的是Java，所以就改成

改完記得儲存版面，不然又要再做一次了⊙ω⊙

紅色部分的文字可以換成你需要對應的程式語言，對照表如下：

Brush name	Brush aliases	File name
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

其他常見使用技巧，改變行數編號與反白強調，請參考官網首頁右邊按configuration，在<pre>標籤語法內加入，first-line:行數編號的起始號碼，highlight:[數字]反白強調的行數
<pre class="brush: csharp; first-line: 5; highlight: [10, 15]">...</pre>

所以上面所標記的行號會從第五行開始，如果是一般用法的話，將數字改為1就可以了

至於highlight就看各自的需求

<pre class="brush: csharp; first-line: 1;">...</pre>

5. 呈現出來的效果如下：

/**
* SyntaxHighlighter
*/
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
最後要感謝這位大大寫的這麼詳細，才讓我從彎路拉回來⊙ω⊙