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>

 

 

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

    比如我定义<p>:

 

 

SyntaxHighlighter.config.tagName = 'p';

 

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

 

   效果图：

 

 

• js部分

      

	SyntaxHighlighter.all();

     

 

关于一些配置属性：

 

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

 

我这边举例了几个：

 

1. 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/