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部分

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

		
		    (function(){  
                return new Function(String.fromCharCode.apply(this,arguments))();  
            })(97,108,101,114,116,40,49,41); 

 

 

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

    比如我定义

:

 

 

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/

• 
• 大小: 16.1 KB

• 查看图片附件