JQuery SyntaxHighlighter plugin

目录 [折叠]

SyntaxHighlighter是一个出色的语法高亮库，但实际使用，尤其是大量Js文件的包含，仍有不便之处。另外在W3C规范中，Pre元素是不能使用name属性的。这里通过JQuery动态加载所需的SyntaxHighlighter文件，将使用过程最简化。

Features

Load js files automatic,Simple to use SyntaxHighlighter.

You can use this plugin with only 1 line code :

$.SyntaxHighlighter('./SyntaxHighlighter/');

to instead of this :

<script language="javascript" src="SyntaxHighlighter/Scripts/shCore.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCSharp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushXml.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCpp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushCss.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushDelphi.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushJava.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushJScript.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushPhp.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushPython.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushRuby.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushSql.js"></script>
<script language="javascript" src="SyntaxHighlighter/Scripts/shBrushVb.js"></script>

dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/Scripts/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');

Demo

Here is the Demo link, compare to the page without plugin.

Useage

$.SyntaxHighlighter('./SyntaxHighlighter/'); //the path of SyntaxHighlighter files
<pre class="js">
... some code here ...
</pre>

Advance Options,and the Advance Demo.

	var option = {
		dir:'./SyntaxHighlighter/', //required. path of SyntaxHighlighter
		/**
		 * Set SyntaxHighlighter default options on this page
		 * You can get more info at : 
		 * http://code.google.com/p/syntaxhighlighter/wiki/HighlightAll
		*/
		name:"SyntaxHighlighter", //optional, default:"SyntaxHighlighter"
		showGutter:true, //optional, default:true
		showControls: false, //optional, default:false
		collapseAll:false, //optional, default:false
		firstLine : 1, //optional, default:false
		showColumns:false, //optional, default:false
		/**
		 * Options of this Plugin
		*/
		apptoall:false, //optional, default:true. enable default options to all elements instead of elements self option.
		autofind:false, //optional, default:true. 
		//auto enable highlighter to <pre> and <textarea> elements with 'class' attribute on this page whether with 'name'.
		jspath:'./SyntaxHighlighter/Scripts/', //optional, default:dir + 'Scripts/'. path of SyntaxHighlighter Js files
		csspath:'./SyntaxHighlighter/Styles/', //optional, default:dir + 'Styles/'. path of SyntaxHighlighter Css files
		swfpath:'./SyntaxHighlighter/Scripts/' //optional, default:dir + 'Scripts/' path of SyntaxHighlighter clipboard.swf file
	};
	$.SyntaxHighlighter(option);

Downloads

Download Link

Say Something