当前位置:  首页  >  前端开发  >  设计思想

javascript实现代码高亮-wangHighLighter.js

wangHighLighter.js是一款应用于富文本编辑器的代码高亮插件,目前支持常用的20多种语言,并提供了7种常见的主题风格供选择。

1. 引言

(先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新,都参见该网址为准

可能有朋友关注过我的wangEditor——基于bootstrap的富文本编辑器。做一个富文本编辑器其实没多大意思,网上有的是编辑器插件。但是带插入代码并且支持代码高亮的富文本编辑器就不多见了。这是其一。

其二,网上的代码高亮工具(如:SyntaxHighlighter),一般需要引用js和css到页面,页面中本来就有静态的文本,这样结合起来显示出高亮效果。而这种情况应用到富文本编辑器是不行的,因为富文本编辑器编辑出来的东西一旦保存起来,还指不定在什么样的环境下加载显示呢,怎么能指望所有的页面都去引用第三方的高亮插件?因此我们需要来一步转换:

上图表示的内容,不知道大家能不能明白。其实就是说,我们需要用富文本框编辑出来的代码,到哪里都能通吃,而不是依赖于第三方的插件(如:SyntaxHighlighter)

于是,我为wangEditor开发了一个用于代码高亮的插件——wangHighLighter——下载地址:https://github.com/wangfupeng1988/wangHighLighter

2. 使用wangHighLighter.js

wangHighLighter.js目前支持常用的20多种语言,并提供了7种常见的主题风格供选择。

应用起来也非常简单,只需要三步:

第一:引用wangHighLighter.js

在页面中引用wangHighLighter.js

<script src="js/wangHighLighter-1.0.0-min.js" type="text/Javascript">script>

第二,绑定语言和主题

 将wangHighLighter.js所支持的语言和主题,绑定到下拉列表中,供使用者选择,如下图:

通过wangHighLighter.getLangArray()方法可以获取所有语言的数组;通过wangHighLighter.getThemeArray()方法可以获取所有主题的数组。因此可以用如下代码来绑定语言和主题:

语言: <select id="sltLang">select> 主题: <select id="sltTheme">select> <script type="text/Javascript"> $(function () { var $sltLang = $('#sltLang'), langArray = wangHighLighter.getLangArray(), $sltTheme = $('#sltTheme'), themeArray = wangHighLighter.getThemeArray(), item, for (item in langArray) { $sltLang.append($('' &#43; langArray[item] &#43; '')); } for (item in themeArray) { $sltTheme.append($('' &#43; themeArray[item] &#43; '')); } }); script>

第三,应用

通过wangHighLighter.highLight(lang, theme, code)方法可以高亮处理代码,并返回。只需要传入语言、主题和准备高亮的字符串,执行一步方法即可解决,是不是非常简单?

$btn1.click(function () { var code = $txt1.val(), //获取textarea中原始字符串 lang = $sltLang.val(), //获取语言 theme = $sltTheme.val(), //获取主题  highLightCode; highLightCode = wangHighLighter.highLight(lang, theme, code); //高亮处理代码  $div1.html(highLightCode); });

这段代码实现效果如下图:

3. 在wangEditor中应用

wangEditor是一款基于bootstrap的富文本编辑器, 现在已经利用wangHighLighter.js为wangEditor实现了“插入代码”的功能!使wangEditor成为一款互联网上不多见的开源的可插入代码的富文本编辑器。

4. 升级 & 更新

wangHighLighter.js 目前为1.0.0版本,尚有一些bug和缺陷有待修复,我会在业余时间不断更新完善,是它成为富文本编辑器插入代码功能的得力助手!

另外,如果有时间,我会把wangHighLighter.js的源码设计写一篇文章说明一下,包括程序的结构以及其中正则表达式的应用。

QQ群 164999061 ,欢迎加入讨论!

-------------------------------------------------------------------------------------------------------------

欢迎关注我的微博

也欢迎关注我的教程:

从设计到模式深入理解Javascript原型和闭包系列》《微软petshop4.0源码解读视频》《json2.js源码解读视频

-------------------------------------------------------------------------------------------------------------

内容推荐:免费高清PNG素材下载

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有 京ICP备19059560号-4