使用 SyntaxHighlighter 实现代码高亮着色

2015-11-16 23:50| 发布者: CODETC| 查看: 1056| 评论: 0

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源码实例

文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-267-1.html

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部