wangHighLighter 是一个将代码进行格式化和高亮显示的 JavaScript 插件，可应用到富文本框中。例如wangEditor。wangHighLighter支持常用的20中编程语言，并提供多种主题风格供选择，让您的代码“动”起来！

2.1. 引用 wangHighLighter.min.js

2.2. 设置语言和主题选项
通过wangHighLighter.getLangArray()可以获取一个数组，里面包含了wangHighLighter支持的所有语言；
通过wangHighLighter.getThemeArray()可以获取一个数组，里面包含了wangHighLighter支持的所有主题；

语言：

主题：
    var $sltLang = $('#sltLang'),        langArray = wangHighLighter.getLangArray(),  //获取语言数组        $sltTheme = $('#sltTheme'),        themeArray = wangHighLighter.getThemeArray(), //获取主题数组        item;    //绑定语言下拉框    for (item in langArray) {        $sltLang.append($('' + langArray[item] + ''));    }    //绑定主题下拉框    for (item in themeArray) {        $sltTheme.append($('' + themeArray[item] + ''));    }

效果如下：

2.3. 应用
通过执行wangHighLighter.highLight(lang, theme, code)即可把一段代码进行格式化、高亮显示。

var code = $txt1.val(),  //获取 $txt1 输入框中输入的原始字符串
    lang = $sltLang.val(), //获取语言
    theme = $sltTheme.val(), //获取主题选项
    highLightCode;

highLightCode = wangHighLighter.highLight(lang, theme, code); //格式化代码$div1.html(highLightCode);

wangHighLighter支持多个主题：

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

您可能感兴趣的文章: