[原创]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对象Clone实例分析
Jun 09 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 Javascript
详解ajax的data参数错误导致页面崩溃
Apr 30 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生成xml简单实例代码
2009/12/16 PHP
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jQuery中获取checkbox选中项等操作及注意事项
2013/11/24 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
PyCharm代码格式调整方法
2018/05/23 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
解决python2 绘图title,xlabel,ylabel出现中文乱码的问题
2019/01/29 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python中数字是否为可变类型
2020/07/08 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
英语感恩演讲稿
2014/01/14 职场文书
年终晚会主持词
2014/03/25 职场文书
推荐信格式范文
2014/05/09 职场文书
2016年“七一建党节”广播稿
2015/12/18 职场文书
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS