為了要讓程式碼在網頁上可以被明顯的呈現出來，我們可以使用一套免費的軟體，就是Syntax Highlighter；那要怎麼做才能使程式語法可以被呈現出來呢?
首先至SyntaxHighlighter官網下載，發文時版本是使用3.0.83，首頁右邊按download下載後解壓縮，將檔案上傳至網路空間或主機上，若沒有空間可以使用官方的，不過如果哪天官方設定值變更或是換網址的時候就會發生連接不到的問題嚕！因此建議可以的話盡量不要使用官方的檔案位置，另外你也可以贊助作者，請於首頁右邊按donate。
你可能會發現解壓縮後的檔內都是JavaScript與CSS的檔案，可是痞客邦無法上傳這些檔案，所以我們只好使用引用的方式來使網頁呈現程式語法效果~那要怎麼做呢？
1.Pixnet進入後台管理，點選部落格功能
2.點選左邊側欄，部落格管理中的側邊欄位設定
3.新增一個版位，放哪邊都可以
4.進入版位設定，給這個版位一個名字，下方就是貼入要引入的語法
程式碼整理後如下：
<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>
<script type="text/javascript">SyntaxHighlighter.all()</script>
再加入你使用的程式語言，例如C#，如下程式碼
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" type="text/javascript"></script>
紅色部分的文字可以換成你需要對應的程式語言，對照表如下：
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
Synataxhighlighter預設使用 <pre> ... </pre> 標籤來辨識程式碼，使用如下：
<pre> ...你的程式碼... </pre>
在發表文章時，按「html」來開啟「HTML 原始程式碼編輯器」對話框，將上面寫法填入，在此我用官網上C#的語言來做例子，如下圖與效果：
// SyntaxHighlighter makes your code snippets
//beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
this.length = 0;
push.apply(this, elems);
return this;
}
其他常見使用技巧，改變行數編號與反白強調，請參考首頁這篇，或是官網首頁右邊按configuration，在<pre>標籤語法內加入，first-line:行數編號的起始號碼，highlight:[數字]反白強調的行數<pre class="brush: csharp; first-line: 5; highlight: [10, 15]">...</pre>
留言列表
{{ article.title }}