SyntaxHighlighter 在 Blogger 的使用教學

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


SyntaxHighlighter 可標記以下的程式語言或標記語言
語言名稱指定縮寫檔名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
ColdFusioncf, coldfusionshBrushColdFusion.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
Erlangerl, erlangshBrushErlang.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.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 行
<pre name="code" class="brush: java;">


name 屬性指定為 "code" , class 屬性指定為 "brush: java;" ,亦即指定 Java 語言,若是其他語言就改成該語言的指定縮寫即可。


the end

2 則留言:

Unknown 提到...

你好,我依照板大的說明,在 head 之前加上了我的連結,並將需要的檔案放在google site裡,但是卻在發文之後沒有看到相關的效果,不曉得除了在 修改HTML 這個地方,是不是還有其他要設定的?
P.S 我是用blogger

Kaiching Chang 提到...

外連的 script 要放在 <head> 到 </head> 喔!已修改內文