wangHighLighter代碼高亮 JavaScript 插件

1. 介紹

wangHighLighter 是一個將代碼進行格式化和高亮顯示的 JavaScript 插件，可應用到富文本框中。例如wangEditor。wangHighLighter支持常用的20中編程語言，并提供多種主題風格供選擇，讓您的代碼“動”起來！

2. 使用wangHighLighter

2.1. 引用 wangHighLighter.min.js

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

2.2. 設置語言和主題選項
通過wangHighLighter.getLangArray()可以獲取一個數(shù)組，里面包含了wangHighLighter支持的所有語言；
通過wangHighLighter.getThemeArray()可以獲取一個數(shù)組，里面包含了wangHighLighter支持的所有主題；

<span>語言：</span>
<select id="sltLang"></select>
<span>主題：</span>
<select id="sltTheme"></select><script type="text/javascript">    var $sltLang = $('#sltLang'),        langArray = wangHighLighter.getLangArray(),  //獲取語言數(shù)組        $sltTheme = $('#sltTheme'),        themeArray = wangHighLighter.getThemeArray(), //獲取主題數(shù)組        item;    //綁定語言下拉框    for (item in langArray) {        $sltLang.append($('<option>' + langArray[item] + '</option>'));    }    //綁定主題下拉框    for (item in themeArray) {        $sltTheme.append($('<option>' + themeArray[item] + '</option>'));    }</script>

效果如下：

2.3. 應用
通過執(zhí)行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支持多個主題：

3. 應用于wangEditor

wangEditor是一款基于bootstrap的富文本編輯器， 現(xiàn)在已經(jīng)利用wangHighLighter.js為wangEditor實現(xiàn)了“插入代碼”的功能！使wangEditor成為一款互聯(lián)網(wǎng)上不多見的開源的可插入代碼的富文本編輯器。