[原创]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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
jQuery使用height()获取高度需要注意的地方
Dec 13 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
Angular4 组件通讯方法大全(推荐)
Jul 12 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
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动态柱状图实现方法
2015/03/30 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
layer ui 导入文件之前传入数据的实例
2019/09/23 Javascript
jQuery实现点击滚动到指定元素上的方法分析
2020/03/19 jQuery
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
Django中Forms的使用代码解析
2018/02/10 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
PyQt5实现简易电子词典
2019/06/25 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
Python 3.8 新功能来一波(大部分人都不知道)
2020/03/11 Python
python能开发游戏吗
2020/06/11 Python
AmazeUI的下载配置与Helloworld的实现
2020/08/19 HTML / CSS
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
思想政治自我鉴定
2013/10/06 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
国旗下的演讲稿
2014/05/08 职场文书
离职保密承诺书
2014/05/28 职场文书
《中国梦我的梦》小学生演讲稿
2014/08/20 职场文书
2015年女生节活动总结
2015/02/27 职场文书
如何在CocosCreator里画个炫酷的雷达图
2021/04/16 Javascript
PHP中strval()函数实例用法
2021/06/07 PHP