Syntaxhighlighter-代码高亮插件引见 _Web前端

Syntaxhighlighter---代码高亮插件介绍

简单地介绍一下常用的代码高亮工具 SyntaxHighlighter。

1. ??SyntaxHighlighter is what?

考虑再三还是引用官网的定义来介绍一下什么是SyntaxHighlighter

SyntaxHighlighter is a fully functional self-contained code syntax(语法) highlighter developed in JavaScript.

2. ? What?SyntaxHighlighter looks like?

贴了一张官网上的图来直观地展示一下：

1

2

3

4

5

6

7

// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com

var setArray = function(elems) {

????this.length = 0;

????push.apply(this, elems);

????return this;
}

3. ? 怎样使用SyntaxHighlighter？

html部分

<!-- 脚本文件依赖 -->
<script type="text/javascript" src="syntaxhighlighter/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/shBrushJScript.js"></script>
<script type="text/javascript" src="syntaxhighlighter/shBrushXml.js"></script>
<!-- 样式文件依赖 -->	
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/shCoreDefault.css"/>

???shCore.js----------核心文件

<pre class="brush: xml;"><div id="firstTestCase"></div></pre>		
<pre class="brush: js;">
		    (function(){  
                return new Function(String.fromCharCode.apply(this,arguments))();  
            })(97,108,101,114,116,40,49,41); 
</pre>

SyntaxHighlighter默认会自动查找<pre></pre>标签，其中标签可自定义，

?? ?比如我定义<p>:

SyntaxHighlighter.config.tagName = 'p';

?? ?2. ?根据class类名选择不一样的格式刷，我上面的例子取的是xml和js，当前也可以是php(需要和你引入的依赖js文件相对应)

?? 效果图：

js部分

?? ? ?

	SyntaxHighlighter.all();

??? ?

关于一些配置属性：

具体可以参考官网上的：http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

我这边举例了几个：

SyntaxHighlighter.defaults['toolbar'] = false;

?? ?默认是true的，

--------http://alexgorbatchev.com/SyntaxHighlighter/manual/demo/toolbar.html

?? ? 2. ?collapse:true

?? 默认是false的

-------http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

扩展阅读：

1、官网：http://alexgorbatchev.com/SyntaxHighlighter/