SyntaxHighlighter Autoloader(自动加载)最优方式

SyntaxHighlighter Autoloader(自动加载)最优方式

一、SyntaxHighlighter介绍

SyntaxHighlighter是一款用于web页面的代码着色工具,可以用来着色多种语言,可以是HTML,CSS,Javascript,还可以是C,JAVA等编程语言。它可以在网页中对各种程序源代码语法进行加亮显示。支持当前流行的各种编程语言:C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML。

因为使用SyntaxHighlighter的时候会使用到多种语言,一次必载入全部的语言配置文件下载的东西会比较多,所以SyntaxHighlighter提供了一个shAutoloader.js脚本。

二、使用教程

1、将下载的SyntaxHighlighter文件解压缩,只保留里面的Scripts文件夹和styles文件夹。

2、在网页的 head /head 之间引入css文件:

link rel= stylesheet type= text/css href= /static/syntaxhighlighter/Styles/shCoreDefault.css /link

3、在网页的 /body 标签前面引入js文件:

script class="javascript" src="/static/syntaxhighlighter/Scripts/shCore.js" /script script class="javascript" src="/static/syntaxhighlighter/Scripts/shAutoloader.js" /script script class="javascript" function path() { var args = arguments,result = []; for (var i = 0; i args.length; i++) result.push(args[i].replace('$', '/static/syntaxhighlighter/Scripts/')); return result;}$(function() { SyntaxHighlighter.autoloader.apply(null, path( 'php $shBrushPhp.js', 'java $shBrushJava.js', 'objc obj-c $shBrushObjC.js', 'actionscript3 as3 $shBrushAS3.js', 'bash shell $shBrushBash.js', 'coldfusion cf $shBrushColdFusion.js', 'c# c-sharp csharp $shBrushCSharp.js', 'delphi pascal $shBrushDelphi.js', 'jfx javafx $shBrushJavaFX.js', 'js jscript javascript $shBrushJScript.js', 'perl pl $shBrushPerl.js', 'py python $shBrushPython.js', 'ruby rails ror rb $shBrushRuby.js', 'vb vbnet $shBrushVb.js', 'xml xhtml xslt html $shBrushXml.js' )); SyntaxHighlighter.defaults['gutter'] = true;//是否显示代码行数 SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.defaults['quick-code'] = false; SyntaxHighlighter.all();}) /script

三、使用方法

一:使用pre

pre name="code" class="php" //这里是你需要高亮的代码 /pre

div class="jb51code" pre class="brush:py;" //python代码 /pre /div

二:使用textarea

textarea name="code" class="c#" cols="60" rows="10" //这里是你需要高亮的代码 /textarea

四、高级技巧 按需加载

但文章详细页面经常不会有任何代码,所以这些js文件以及js代码需要判断是否执行:

//判断文章是否需要加载代码高亮插件var isCode = Model.Html.ToString().Contains( " pre class=\"brush:" ); if (isCode){ //这里放置上面的js文件链接以及js代码。 }

如果没有使用框架可以使用下面的代码

if($('div.jb51code').length 0){ //这里放置上面的js文件链接以及js代码。}

SyntaxHighlighter Autoloader(自动加载)最优方式