快捷導(dǎo)航

SyntaxHighlighter?Autoloader(自動(dòng)加載)最優(yōu)方式

更新時(shí)間：2023年06月21日 10:04:11 作者：mdxy

SyntaxHighlighter是一款用于web頁(yè)面的代碼著色工具，可以用來(lái)著色多種語(yǔ)言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語(yǔ)言，這里為大家介紹一下比較好的加載方案

一、SyntaxHighlighter介紹

SyntaxHighlighter是一款用于web頁(yè)面的代碼著色工具，可以用來(lái)著色多種語(yǔ)言，可以是HTML,CSS,Javascript,還可以是C,JAVA等編程語(yǔ)言。它可以在網(wǎng)頁(yè)中對(duì)各種程序源代碼語(yǔ)法進(jìn)行加亮顯示。支持當(dāng)前流行的各種編程語(yǔ)言：C#、CSS、C++、Delphi、Java、JavaScript、PHP、Python、Ruby、SQL、Visual Basic、XML / HTML。

因?yàn)槭褂肧yntaxHighlighter的時(shí)候會(huì)使用到多種語(yǔ)言，一次必載入全部的語(yǔ)言配置文件下載的東西會(huì)比較多，所以SyntaxHighlighter提供了一個(gè)shAutoloader.js腳本。

二、使用教程

1、將下載的SyntaxHighlighter文件解壓縮，只保留里面的Scripts文件夾和styles文件夾。

2、在網(wǎng)頁(yè)的<head></head>之間引入css文件：

3、在網(wǎng)頁(yè)的</body>標(biāo)簽前面引入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;//是否顯示代碼行數(shù)
    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>

四、高級(jí)技巧按需加載

但文章詳細(xì)頁(yè)面經(jīng)常不會(huì)有任何代碼，所以這些js文件以及js代碼需要判斷是否執(zhí)行：

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

如果沒有使用框架可以使用下面的代碼

if($('div.jb51code').length>0){
    //這里放置上面的js文件鏈接以及js代碼。
}

到此這篇關(guān)于SyntaxHighlighter Autoloader(自動(dòng)加載)最優(yōu)方式的文章就介紹到這了,更多相關(guān)SyntaxHighlighter 自動(dòng)加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: