使用 SyntaxHighlighter 实现代码高亮着色

CodeAE

SyntaxHighlighter是一款用于web页面的代码高亮着色工具，可以用来着色多种语言，是当前用得最多的一款代码高亮插件，使用非常方便。它能让你的代码在网页上以类似IDE编辑器里的样子高亮关键字，可以是PHP,HTML,CSS,Javascript,还可以是C,JAVA等编程语言。

使用步骤：
1、引入以下的js和css文件，要使用哪种刷子就引用哪种语言的刷子文件。

<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemeDefault.css" />

2、使用简单的JS代码启动高亮着色。

<script type="text/javascript">
    SyntaxHighlighter.config.tagName = 'pre';     //可以更改解析的默认Tag。
    SyntaxHighlighter.config.bloggerMode = true; 
    SyntaxHighlighter.config.stripBrs = true;  
    SyntaxHighlighter.all();
<script>

3、将要高亮显示的代码放在一个 pre 标签中(可更改)，并标记上刷子别名。

<pre class="brush: php;">
    public function decrypt($txt,$key="")
    {
        if(empty($key)){
            $key=$this->key;
        }
        $txt = $this->keyED($txt,$key);
        $tmp = "";
        for ($i=0;$i<strlen($txt);$i++)
        {
            $md5 = substr($txt,$i,1);
            $i++;
            $tmp.= (substr($txt,$i,1) ^ $md5);
        }
        return $tmp;
    }
</pre

参数配置
SyntaxHighlighter 为我们提供了3种配置参数的方式，下面我们只介绍其中一种(SyntaxHighlighter.config)

参数名默认值描述

bloggerMode false 博客集成模式，如果你托管在blogger.com上面就必须将其设为true
strings Object 允许你修改默认的工具信息
stripBrs false 如果你的代码中在每行的末尾加上了换行标签，那么这个参数就允许你忽略掉这个换行
tagName "pre" 设置哪类标签下的代码高亮

语法文件
SyntaxHighlighter 采用单独的语法文件，称为刷子，我们需要用不同的刷子来高亮显示不同的代码语言，这里基本上包含了时下流行的所有语言，需要标记什么语言我们就引用不同的刷子文件，然后将 pre 标签标记为刷子别名。

如上例中，我们引入了PHP的刷子(shBrushPhp.js)，同时使用<pre class="brush: php;">来标记。

插件模板
SyntaxHighlighter 为我们提供了多个模板，需要哪种样式的模板就引用哪种样式的css文件。

上例中我们使用的是默认的模板(shThemeDefault.css)，大家可以尝试一下其它模板的效果。

注意：在使用中我们发现了一个问题，在<pre></pre>标记的内容中，如果存中<或>就会使用渲染出错，所以必需把<和>使用& lt;和& gt;来代替。

[PHP] 使用 SyntaxHighlighter 实现代码高亮着色

CodeAE LV9