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;来代替。

点击下载：Syntaxhighlighter源码实例