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

安装方法:

  1. 下载SyntaxHighlighter并解压缩,将解压缩后的文件夹syntaxhighlighter_2.0.296重命名为SyntaxHighlighter,SyntaxHighlighter文件夹下应该三个文件夹,分别是src、scripts、styles,另外还有一个test.html和LGPLv3.txt,然后将SyntaxHighlighter文件夹复制到上传到网站根目录。
  2. 在网页的<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.cssshThemeDjango.cssshThemeEmacs.cssshThemeFadeToGrey.cssshThemeMidnight.cssshThemeRDark.css,可以根据自己喜欢的样式来载入不同的样式文件。

  3. 在</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文件对应一种编程语言(根据文件名可以判断支持哪种编程语言),可以根据实际需要来选择是否载入。

  4. 将需要进行高亮显示的源代码放在<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
  5. 保存,刷新,看看效果吧。

以下是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");

由于这个Theme开始写的时间就是以XHTML 1.0 Transitional写的,现在要更改为XHTML 1.0 Strict,相对来讲,不是太复杂。 经过简单的调试、修改,本站的THeme已完全达到 XHTML 1.0 Strict 的标准,并已经通过W3C的检查(点击页面最下面的W3C检查图标即可查看)。

在修改过程中,遇到以下三个问题:

1、XHTML 1.0 Strict 不支持a标签的target属性,也就是无法强制在新窗口打开网页。经过查找资料显示,W3C一直不提倡使用target这个属性,W3C认为是否在新窗口打开链接应该由用户去选择,而不是强制用户在新窗口里打开,这样很容易就导致一下子开太多的窗口,造成浏览器占用过多的系统资源。

解决办法:以对用户的尊重和遵循W3C标准为目的,放弃使用target属性,如果你想在新窗口打开的话,只能右击鼠标了。

2、XHTML 1.0 Strict 不支持img标签的border属性。

解决办法:在CSS里控制就可以了,如果你要网页上所有图片的边框为0的话,在CSS里加上如下代码(红色部分):img{ border:0;}

3、XHTML 1.0 Strict 不支持script标签的language属性。

解决办法:将<script type=”text/javascript” language=”javascript”>改为<script type=”text/javascript”>,就是将language=”javascript”去掉即可。

欢迎使用 WordPress 。这是系统自动生成的演示文章。编辑或者删除它,开始您的博客!