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

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

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

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

SyntaxHighlighter  
  

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>

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

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>

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

     
/**
* SyntaxHighlighter
*/
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
文章標籤
創作者介紹
MIS

MISTECH 技術手抄本

MIS 發表在 痞客邦 PIXNET 留言(0) 人氣()