[原创]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 相关文章推荐
Javascript 日期处理之时区问题
Oct 08 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
javascript中scrollTop详解
Apr 13 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
jQuery checkbox选中问题之prop与attr注意点分析
Nov 15 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
用js解决数字不能换行问题
2010/08/10 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
初步了解javascript面向对象
2015/11/09 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
JavaScript接口实现方法实例分析
2020/05/16 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
Python基于聚类算法实现密度聚类(DBSCAN)计算【测试可用】
2018/12/26 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
软件工程师面试题
2012/06/25 面试题
优秀少先队工作者事迹材料
2014/05/13 职场文书
党支部先进事迹材料
2014/12/24 职场文书
个人政治思想总结
2015/03/05 职场文书
[有人@你]你有一封绿色倡议书,请查收!
2019/07/18 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android