SyntaxHighlighter 3.0.83 的使用

  • A+
所属分类:脚本语言

SyntaxHighlighter 是一套在浏览器上对各种代码进行语法着色的独立 JavaScript 库。

官方下载地址:http://alexgorbatchev.com/SyntaxHighlighter/download/

因为使用SyntaxHighlighter的时候会使用到多种语言,一次必载入全部的语言配置文件下载的东西会比较多,所以SyntaxHighlighter 3.0 开始提供了一个shAutoloader.js脚本。它让浏览器按照当前页面內容去载入相对应语言的上色系统,这对载入速度是一大改善! 下面是 admin10000.com 给出的代码

1、在网页头部加载核心JS和样式文件

<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/styles/shCore.css" />
<link type="text/css" rel="stylesheet" href="/SyntaxHighlighter/styles/shThemeDefault.css" />  
<script type="text/javascript" src="/SyntaxHighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/SyntaxHighlighter/scripts/shAutoloader.js"></script>

2、执行SyntaxHighlighter.autoloader。

autoloader必须在页面完成载入后再去执行它。如果引用了jQuery,可以放$(document).ready()里,就能看到效果了。

<script type="text/javascript">
function path()
{
    var args = arguments,
    result = [];
    for(var i = 0; i < args.length; i++)
        result.push(args[i].replace('@', '/SyntaxHighlighter/scripts/'));
    return result
};
$(document).ready(function(){
    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.defaults['smart-tabs'] = true;
    SyntaxHighlighter.defaults['tab-size'] = 4;
    SyntaxHighlighter.all();
});
</script>

相关文档:FckEditor(CKEditor)配置详细教程

QQ群: WEB开发者官方总群(196171896) 验证消息:Admin10000
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin