SyntaxHighlighter 代码高亮动态加载配置
SyntaxHighlighter 2.0的版本需要引人多个类似shBrushJScript的js文件,
从SyntaxHighlighter3.0开始可以使用动态加载的方式 需要那个js动态引人,
下面介绍代码高亮详细动态配置,
首先需要引人的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>
实例图片如下:


