SyntaxHighlighter是一款用JavaScript编写的功能强大的代码高亮显示工具,它可以在网页中对各种程序源代码语法进行高亮显示。当前最新版本是2.0.296,目前支持的编程语言为:Bash/shell、C#、C++、CSS、Delphi、Diff、Groovy、JavaScript、Java、Perl、PHP、Plain Text、Python、Ruby、Scala、SQL、Visual Basic、XML/XHTML/XSLT/HTML。
演示地址:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo
下载地址:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
安装方法:
- 下载SyntaxHighlighter并解压缩,将解压缩后的文件夹syntaxhighlighter_2.0.296重命名为SyntaxHighlighter,SyntaxHighlighter文件夹下应该三个文件夹,分别是src、scripts、styles,另外还有一个test.html和LGPLv3.txt,然后将SyntaxHighlighter文件夹复制到上传到网站根目录。
-
在网页的<head></head>之间插入以下代码:
<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/styles/shCore.css"/> <link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/styles/shThemeDefault.css"/>
其实就是载入两个CSS文件,其中第二行载入的shThemeDefault.css是默认的样式,在SyntaxHighlighter目录的styles目录中一共提供了6个样式文件,分别是shThemeDefault.css、shThemeDjango.css、shThemeEmacs.css、shThemeFadeToGrey.css、shThemeMidnight.css、shThemeRDark.css,可以根据自己喜欢的样式来载入不同的样式文件。
-
在</body>的前面插入以下代码
<script src="/SyntaxHighlighter/scripts/shCore.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushBash.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushCpp.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushCss.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushDelphi.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushDiff.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushGroovy.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushJava.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushJScript.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushPerl.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushPhp.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushPlain.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushPython.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushRuby.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushScala.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushSql.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushVb.js" type="text/javascript"></script> <script src="/SyntaxHighlighter/scripts/shBrushXml.js" type="text/javascript"></script> <script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '/SyntaxHighlighter/scripts/clipboard.swf'; SyntaxHighlighter.all(); </script>
在以上代码载入的19个js文件中,除了第一个shCore.js外,其他的都是每个js文件对应一种编程语言(根据文件名可以判断支持哪种编程语言),可以根据实际需要来选择是否载入。
-
将需要进行高亮显示的源代码放在<pre></pre>之间,例如:
<pre class="brush: c-sharp;"> function test() : String { return 10; } </pre>其中c-sharp是定义编程语言的类型,关于其他类型编程语言的定义方法,详见下表的Brush aliases列:
Brush name Brush aliases File name Bash/shell bash, shell shBrushBash.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 Groovy groovy shBrushGroovy.js JavaScript js, jscript, javascript shBrushJScript.js Java java shBrushJava.js Perl perl, pl shBrushPerl.js PHP php shBrushPhp.js Plain Text plain, text shBrushPlain.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 -
保存,刷新,看看效果吧。
以下是HTML代码显示效果:
<html> <head> <title>SyntaxHighlighter</title> </head> <body> </body> </html>
以下是PHP代码显示效果:
$today = date("F j, Y, g:i a");
$today = date("m.d.y");
$today = date("j, n, Y");
$today = date("Ymd");
$today = date('h-i-s, j-m-y, it is w Day z ');
$today = date('\i\t \i\s \t\h\e jS \d\a\y.');
$today = date("D M j G:i:s T Y");
$today = date('H:m:s \m \i\s\ \m\o\n\t\h');
$today = date("H:i:s");
