分享一个轻量级的代码高亮插件-jshighlight
2013-05-14 19:31
316 查看
![](http://www.sanjh.cn/wp-content/uploads/2013/05/jshighlight.jpg)
jshighlight-一款基于javascript的轻量级的代码着色插件,这个插件使用比较简单,而且代码比较少。虽然原生只支持html、css、javascript,但是它也可以被扩展以支持其他的语言,下面会讲到怎么去扩展它,本博客已经将原来臃肿的插件替换成了jshighlight,具体效果可以查看这篇文章中的代码,下面简要介绍一下她的一些信息:
插件特点
真正轻量级,JS代码压缩后3K左右;调用方便,引入jshighlight核心js文件即可;
不依赖于任何其他库;
原生支持HTML、CSS、Javascript;
支持其他语言的轻松扩展;
显示行号,直接复制代码不会复制行号;
提供四套主题可选,默认使用Monokai样式主题;
使用步骤
在<head>中引入相应的样式文件:<!--默认样式--> <link href="../theme/jshighlight-default.css" rel="stylesheet" />
在</body>前中引入相应js文件:
<!--核心js文件--> <script src="../js/jshighlight.core-v1.0.1.min.js"></script>
在需要着色的pre标签中加入’data-language’属性,取值为:’javascript’|'html’|'css’,扩展后可以设置其他的值;
如何扩展
在</body>中引入相应js文件:<script src="../js/jshighlight.core-v1.0.0.min.js"></script>
自定义需要着色的语言所需要的样式,例如:
.php-com{ color: #CCC; } .php-mrk{ color: red; font-weight: bold; } .php-bol{ color: #F92665; font-style: italic; } .php-var{ color: #A6E22E; } ....... /* 也可以使用默认的样式,传入默认样式类名即可, * 样式名称可以自由使用,比如注释对应的样式也可以用.key * 默认样式如下: */ .com{ color:#75715E } /*普通注释*/ .doc{ color:#48BEEF } /*文档注释*/ .str{ color:#E6DB74 } /*字符串*/ .key{ color:#48BEEF; font-weight: bold; font-style: italic } /*关键字*/ .obj{ color:#AE81FF; font-weight:bold } /*内置对象、函数*/ .num{ color:#F92672 } /*数字*/ .ope{ color:#FD971F } /*操作符*/ .bol{ color:#FF5600; font-style: italic } /*布尔值*/ .mrk{ color:#F92665 } /*html标签*/ .attr{ color:#A6E22E } /*属性名称*/ .val{ color:#E6DB74 } /*属性值*/
定义提取需要着色的内容的正则,比如:
'com' : /(\/\*[\s\S]*?\*\/|\/\/.*|<\!--[\s\S]*?-->)/, //普通注释 'mrk' : /(<\?php|\?>)/, //标签 'str' : /('(?:(?:\\'|[^'\r\n])*?)'|"(?:(?:\\"|[^"\r\n])*?)")/, //字符串|
调用JSHL的extendLanguage方法:
JSHL.extendLanguage('php',{ /* * 每个分组对应的样式类名 * 比如:'com'中有一个分组,'mrk'中有一个分组,'key'中有两个分组, * 那么: com中的分组对应'php-com','mrk'中的分组对应 * 'php-mrk','key'中的第一个分组对应'str',第二个对应'key',以此类推; */ cls : ['php-com','php-mrk','str','key','php-var','obj','num','php-bol','ope'], reg : { 'com' : /(\/\*[\s\S]*?\*\/|\/\/.*|<\!--[\s\S]*?-->)/, //普通注释 'mrk' : /(<\?php|\?>)/, //标签 'str' : /('(?:(?:\\'|[^'\r\n])*?)'|"(?:(?:\\"|[^"\r\n])*?)")/, //字符串 'key' : /(?:[^$_@a-zA-Z0-9])?(and|or|...|throw)(?![$_@a-zA-Z0-9])/, //关键字 'var' : /(\$[\w][\w\d]*)/, //变量名 'obj' : /(?:[^$_@A-Za-z0-9])?(echo|...|date)(?:[^$_@A-Za-z0-9])/, //内置函数(部分) 'num' : /\b(\d+(?:\.\d+)?(?:[Ee][-+]?(?:\d)+)?)\b/, //数字 'bol' : /(?:[^$_@A-Za-z0-9])?(true|false)(?:[^$_@A-Za-z0-9])/, //布尔值 'ope' : /(==|=|===|\+|-|\+=|-=|\*=|\\=|%=|<|<=|>|>=|\.)/ //操作符 }, //如果这个语言是包含在html中的设置下列属性 wrapper: 'html', content : { lang : 'php', // 语言名称,在于pre标签的data-language一致 wrapper : /()/g // 需要着色的代码被包裹的形式 } })
实际效果
1. Default Theme–Monokai![](http://www.sanjh.cn/wp-content/uploads/2013/05/default.png)
2. iPlastic Theme
![](http://www.sanjh.cn/wp-content/uploads/2013/05/iPlastic.png)
3. Eiffel Theme
![](http://www.sanjh.cn/wp-content/uploads/2013/05/Eiffel.png)
4.Blackboard Theme
![](http://www.sanjh.cn/wp-content/uploads/2013/05/Blackboard.png)
插件主页
https://github.com/daiying-zhang/jshighlight升级记录
version 1.0.21. 修复代码以”//….”形式结尾时末尾额外增加”|”的bug,在这里感谢@枯叶反馈此bug;
下载地址
点击下载转载自:http://www.sanjh.cn/fen-xiang-yi-ge-qinag-liang-ji-yu-fa-gao-liang-cha-jian-jshighlight.html
相关文章推荐
- 10款轻量级JavaScript代码高亮插件
- 分享一个课自动整理代码的KEIL插件
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- 分享过滤条件中增加一个自定义过滤变量插件代码
- 分享过滤条件中增加一个自定义过滤变量插件代码
- jiathis分享插件,一个页面中分享多个分享代码
- 分享一个Eclipse代码配色教程与颜色主题插件
- 开发一个Word的代码高亮插件
- 分享一个很好用的验证码插件代码
- ckeditor syntaxhighlighter代码高亮插件配置分享
- 分享一个完整程序的代码(消除类游戏)
- 分享一个超炫HTML5开发的jQuery进度条插件 - percentageloader
- 分享给大家一个比较装逼的小代码
- 利用 CTags 开发一个 Sublime Text 代码补完插件
- 分享一个前后端分离的轻量级内容管理框架
- 分享一个超棒的免费jQuery幻灯插件:Nivo Slider
- 分享一个iOS输入框特殊限制的代码 UITextField (Validation)
- 写插件代码查看单据简单示例分享
- 轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
- 分享一个自己动手写的jQuery分页插件