SyntaxHighlighter 代码高亮动态加载配置

SyntaxHighlighter 2.0的版本需要引人多个类似shBrushJScript的js文件,

从SyntaxHighlighter3.0开始可以使用动态加载的方式 需要那个js动态引人,

下面介绍代码高亮详细动态配置,

SyntaxHighlighter3.0 下载地址

首先需要引人的js文件是jquery.js ,shCore.js,shAutoloader.js这三个文件

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shAutoloader.js"></script>

然后引人css样式文件

<link type="text/css" rel="stylesheet" href="styles/shThemeDefault.css"/>

在所有js引人的后面加上初始化代码(需要页面加载完成后写如下代码否则不好用)

$(document).ready(function()
{ SyntaxHighlighter.autoloader( 'js jscript javascript /js/shBrushJScript.js', 'applescript /js/shBrushAppleScript.js' ); SyntaxHighlighter.all(); });

下面给出完整的实例代码:

 

<!DOCTYPE html>
<html>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="scripts/shCore.js"></script>
	<script type="text/javascript" src="scripts/shAutoloader.js"></script>
	<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
	<head>
	
	</head>
	<body>
		
		<pre class="brush: js;">
		function helloSyntaxHighlighter()
		{
			return "hi!";
		}
		</pre><br>	
		<pre class="brush: xhtml;">
			<div class="digger">
				<div class="dcenter">
					<div class="digg_g">
						<div class="top">顶</div>
						<div class="bottom" id="diggnum1">	
						</div>
					</div>
					<div class="digg_f" >
						<div class="top">踩</div>
						<div class="bottom" id="diggnum2">
						</div>
					</div>
				</div>
			</div>
		</pre>
		
<script type="text/javascript">

$(document).ready(function()
{
	function path()
	{
	  var args = arguments,result = [];
	 
	  for(var i = 0; i < args.length; i++)
		  result.push(args[i].replace('@', 'scripts/'));
	 
	  return result
	};
	//去掉工具栏(小问号)
	SyntaxHighlighter.defaults['toolbar']=false;
	SyntaxHighlighter.autoloader.apply(null, path(
	  'applescript            @shBrushAppleScript.js',
	  'actionscript3 as3      @shBrushAS3.js',
	  'bash shell             @shBrushBash.js',
	  'coldfusion cf          @shBrushColdFusion.js',
	  'cpp c                  @shBrushCpp.js',
	  'c# c-sharp csharp      @shBrushCSharp.js',
	  'css                    @shBrushCss.js',
	  'delphi pascal          @shBrushDelphi.js',
	  'diff patch pas         @shBrushDiff.js',
	  'erl erlang             @shBrushErlang.js',
	  'groovy                 @shBrushGroovy.js',
	  'java                   @shBrushJava.js',
	  'jfx javafx             @shBrushJavaFX.js',
	  'js jscript javascript  @shBrushJScript.js',
	  'perl pl                @shBrushPerl.js',
	  'php                    @shBrushPhp.js',
	  'text plain             @shBrushPlain.js',
	  'py python              @shBrushPython.js',
	  'ruby rails ror rb      @shBrushRuby.js',
	  'sass scss              @shBrushSass.js',
	  'scala                  @shBrushScala.js',
	  'sql                    @shBrushSql.js',
	  'vb vbnet               @shBrushVb.js',
	  'xml xhtml xslt html    @shBrushXml.js'
	));
	
	SyntaxHighlighter.all();

});
</script>
</body>
</html>

实例图片如下:

SyntaxHighlighter 代码高亮动态加载配置

来源://作者:/更新时间:2013-10-24
相关文章
评论:
验证码:
匿名评论: