LittleHZ [叶歆昊]

SyntaxHighlighter升级新方法：用JavaScript高亮显示源代码的工具

[文章作者：叶歆昊   最后修改：2010-07-19   转载请注明原文链接：http://littz.com/syntaxhighlighter-upgrade-new-method-using-javascript-tool-for-source-code-highlighting.html]

因SupeSite系统无插入源代码的功能，而我的博客经常需要在文章中插入各种源代码，并希望能加亮显示，所以找了两款加亮显示源代码的工具。

第一种为 GeSHi – Generic Syntax Highlighter，官方网站http://qbnz.com/highlighter/，是在服务器端依据PHP运算产生加亮代码输出，在访问者浏览器上显示普通的源代码经过加亮运算之后的HTML。此工具的特点是运算由服务器完成，产生的代码量少，兼容几乎所有浏览器。不足在于如果我希望在我的SupeSite系统插入文章的时候很方便地使用，则需要我自行先修改部分SupeSite的逻辑运算，如果哪天SupeSite系统升级，那逻辑运算又需要重新考量。所以我希望只需要修改模板文件，而不用修改SupeSite程序逻辑的源代码高亮工具。对本工具有兴趣的朋友可以到官方网站查看说明。

第二种为 SyntaxHighlighter，官方网站http://alexgorbatchev.com/wiki/SyntaxHighlighter，它是基于JavaScript，在访问者浏览器运行的工具。不足之处在于输出代码比较多；如果在有其他Javascript的情况下，容易产生冲突，导致兼容性问题；同时JavaScript一贯的问题是容易导致浏览器假死；当浏览器禁用JavaScript时可能导致异常情况（例如插入的是php代码，有个exit，是否会把当前网页的程序退出了呢？又或者插入呢？）。不过综合考虑之后还是决定使用SyntaxHighlighter作为加亮源代码的工具。

因SyntaxHighlighter版本升级至2.0，与之前的1.5版本有非常大的不同，新使用方法如下：

1、假设网页文件test.htm存放在一个目录，则将SyntaxHighlighter解压缩到该目录下的子目录，假设为SyntaxHighlighter

2、在网页的之间插入以下代码：

<script type="text/javascript" src="SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushCpp.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushDelphi.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushDiff.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushGroovy.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushJava.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushPython.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushRuby.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushScala.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushVb.js"></script>
<script type="text/javascript" src="SyntaxHighlighter/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter/styles/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'SyntaxHighlighter/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3、在网页要显示程序源代码的地方插入以下代码（其中的class=”brush:c++;”表示以c++语法显示源代码，其他可设定的brush值一起其它配置可参看官方维基http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes）：

<pre class="brush:c++">
/*
*  我的第一个c++程序
*  @LittleHZ http://littz.com 2006-10-11
*/
#include <iostream>
using namespace std;   

int main()
{
   cout << "Hello world" << endl;
   return 0;
}

显示效果如下：

/*
*  我的第一个c++程序
*  @LittleHZ http://littz.com 2006-10-11
*/
#include <iostream>
using namespace std;   

int main()
{
   cout << "Hello world" << endl;
   return 0;
}