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

本文主要讲解关于SyntaxHighlighter Autoloader(自动加载)最优方式相关内容，由优网导航（www.uonce.com）提供，欢迎关注收藏本站！

一、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脚本。

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

二、使用教程

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

2、在网页的<head></head>之间引入css文件：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

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(自动加载)最优方式的文章就介绍到这了,更多相关SyntaxHighlighter 自动加载内容请搜索优网导航以前的文章或继续浏览下面的相关文章希望大家以后多多支持优网导航！

您可能感兴趣的文章:

SyntaxHighlighter 去掉右侧滚动条的方法
防止SyntaxHighlighter.js的代码高亮时闪一下的解决方法
SyntaxHighlighter自动识别并加载脚本语言
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
SyntaxHighlighter 3.0.83使用笔记
ckeditor syntaxhighlighter代码高亮插件配置分享
CKEditor中加入syntaxhighlighter代码高亮插件
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
解决SyntaxHighlighter 代码高亮不换行问题的解决方法
FCKeditor + SyntaxHighlighter 让代码高亮着色插件
代码着色之SyntaxHighlighter项目(最流行的代码高亮)
syntaxhighlighter 去掉右上角问号图标的三种方法
为SyntaxHighlighter添加新语言的方法
SyntaxHighlighter配合CKEditor插件轻松打造代码语法着色
SyntaxHighlighter语法高亮插件使用说明
ckeditor syntaxhighlighter代码高亮插件，完美修复
coolcode转SyntaxHighlighter与Mysql正则表达式实现分析
FCKeditor 和 SyntaxHighlighter 代码高亮插件的整合
SyntaxHighlighter 语法高亮插件的使用教程
使用SyntaxHighlighter实现HTML高亮显示代码的方法
FCKEditor SyntaxHighlighter整合实现代码高亮显示
SyntaxHighlighter代码加色使用方法
syntaxhighlighter 使用方法
关于实现代码语法标亮 dp.SyntaxHighlighter

相关推荐: PHP+Vue实现前后端加密的轻量级方案分享

本文主要讲解关于PHP+Vue实现前后端加密的轻量级方案分享相关内容，由优网导航（www.uonce.com）提供，欢迎关注收藏本站！在做项目的时候，我遇到一个需求：前后端需要传输一些敏感数据。虽然 HTTPS 已经可以保证传输安全，但在某些场景下，我还是希…