[原创]SyntaxHighlighter自动识别并加载脚本语言


Posted in Javascript onFebruary 07, 2017

SyntaxHighlighter是一个使用JavaScript编写的支持多种编程语言语法高亮的JS插件,很多大型网站或博客都在使用。

SyntaxHighlighter插件默认是每种编程语言加载对应JS语言库,那么如何实现SyntaxHighlighter自动加载不同语言的JS语言库

SyntaxHighlighter官方已经给出了解决方案 shAutoloader.js 自动加载库;

在HTML文件中引用SyntaxHighlighter核心运行库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello SyntaxHighlighter</title>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css" rel="external nofollow" rel="external nofollow" />
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css" rel="external nofollow" rel="external nofollow" />

</head>

shCore.js

 SyntaxHighlighter插件的核心运行库

shAutoloader.js

 自动加载运行库要实现自动加载必须引入此文件

shCore.css

 核心CSS样式

shCoreDefault.css

主题CSS样式

以上四个文件必须引用到文档中

需要高亮显示的代码请入在 <pre class="brush:js;"></pre>

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello SyntaxHighlighter</title>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="styles/shCore.css" rel="external nofollow" rel="external nofollow" />
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css" rel="external nofollow" rel="external nofollow" />
</head>
 
<body>
<h1>Hello SyntaxHighlighter</h1>
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
return "hi!";
}
</pre>

<pre class="brush: js;"> 中的 class="brush: js;"是根据显示代码语言而定

下面是实现SyntaxHighlighter自动加载的主要代码

<script language="javascript">
function path(){
	var args = arguments,
		result = [];
	for(var i = 0; i < args.length; i++)
		result.push(args[i].replace('@', '/pub/sh/current/scripts/'));//请替换成自己项目中SyntaxHighlighter的具体路径
	return result
};
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.all();
</script>

以上就是实现SyntaxHighlighter自动识别语言并自动载语言库的代码,需要的同学可以测试下;

本文实例下载:SyntaxHighlighter自动识别并加载

Javascript 相关文章推荐
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
Mar 07 Javascript
解决vue router组件状态刷新消失的问题
Aug 01 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
javascript表达式和运算符详解
Feb 07 #Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 #Javascript
原生js和css实现图片轮播效果
Feb 07 #Javascript
bootstrap输入框组使用方法
Feb 07 #Javascript
angularjs使用directive实现分页组件的示例
Feb 07 #Javascript
Bootstrap下拉菜单样式
Feb 07 #Javascript
基于JavaScript实现购物车功能
Feb 07 #Javascript
You might like
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php使用websocket示例详解
2014/03/12 PHP
功能强大的php分页函数
2016/07/20 PHP
PHP时间函数使用详解
2019/03/21 PHP
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
2017/03/11 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
2019/11/18 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python3实现windows下同名进程监控
2018/06/21 Python
关于Keras模型可视化教程及关键问题的解决
2020/01/24 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
2019年Java面试必问之经典试题
2012/09/12 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
行政部总经理岗位职责
2014/01/04 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
2016年党支部公开承诺书
2016/03/25 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
浅谈Python数学建模之数据导入
2021/06/23 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
python在package下继续嵌套一个package
2022/04/14 Python