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(自动加载)最优方式的文章就介绍到这了,更多相关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
相关文章
CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程(含插入图片)
一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。2010-03-03javascript开发随笔3 开发iframe富文本编辑器的一点体会
前段时间有个需求是开发富文本编辑器,这个之前随做过,但看了需求,发现有些地方还需google2011-11-11FCKeditor 2.6 编码错误导致修改的内容出现乱码的解决方法
我修改了该文件,其中有些中文字,在 IE 中打开之,发现是乱码,原来这个文件有问题。文件中指定了 charset 为 utf-82010-03-03让谷歌浏览器Google Chrome支持eWebEditor的方法
这篇文章主要介绍了让谷歌浏览器Google Chrome支持eWebEditor的方法,默认情况是不显示的, 还需要安装组件2016-01-01最新版CKEditor的配置方法及插件(Plugin)编写示例
本文记录配置CKEditor过程,并以文章分页插件为例,简要CKEditor Plugin编写过程。 从官网http://ckeditor.com/download下载最新版CKEditor,解压2017-03-03
最新评论