程式語言教學誌 FB, YouTube: PYDOING: SyntaxHighlighter 在 Blogger 的使用教學

本站所使用的語法高亮度系統為 SyntaxHighlighter ，本篇教學的重點為如何在自己的網站上以外連的方式在 Blogger 使用 SyntaxHighlighter 顯示程式碼的語法高亮度。

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

如果要在 Blogger 中使用 SyntaxHighlighter ，必須先到後台「設計」的「修改 HTML 」處

在 <head> 到 </head> 之間加入以如下的 HTML 元素可顯示 Java 的語法高亮度

<!--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-->

裡頭第 5 行的「 shBrushJava.js 」亦即上表中 Java 的檔案名稱

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>

如果要更改其他語言，就將「 shBrushJava.js 」換成其他語言的檔名，若要顯示多種語言的語法高亮度，則在 <script language='javascript'> 標籤之前加入其他的 <script /> 外連到其他語言的檔名即可。

文章內的程式碼部份，必須使用 <pre></pre> 成對標籤圍起來，同時以 class 屬性標明所顯示語言種類，如以下顯示 Java 程式的語法高亮度

<pre name="code" class="brush: java;">
class DemoApp {
    public static void main(String[] args) {
        Demo d = new Demo();
        d.printMessage();
    }
}

class Demo {
    String message = "^_^ 哈囉";
    
    public void printMessage() {
        System.out.println(message);
    }
}

/* 《程式語言：教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：DemoApp.java
    功能：簡單的 Java 範例
    作者：張凱慶
    時間：西元 2010 年 10 月 */</pre>

第 1 行