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>
实例图片如下: