JavaScript implementation code highlighting-wanghighlighter.js

1. Introduction

(Post Wanghighlighter.js's GitHub address: Https://github.com/wangfupeng1988/wangHighLighter Note that updates to the program and usage instructions are subject to this URL)

Maybe a friend has followed my wangeditor--. Rich Text editor based on Bootstrap. Do a rich text editor actually does not have much meaning, the Internet is a lot of editor plug-ins. But a rich text editor with insert code and support for code highlighting is rare. This is one.

Second, the online code highlighting tools (such as: syntaxhighlighter), generally need to refer to JS and CSS to the page, the page will have static text, so combined to show the highlight effect. It is not possible to apply this to a rich text editor, because once the rich text editor is saved, it also refers to the circumstances under which to load the display, how can I expect all the pages to refer to the third-party highlight plugin? So we need to take a step in the conversion:

Said the content, do not know if you can understand. In fact, we need to use the rich text box to edit the code, where we can take all, and not rely on third-party plug-ins (such as: Syntaxhighlighter)

So, I developed a plugin for Wangeditor for code highlighting--wanghighlighter--:https://github.com/wangfupeng1988/wanghighlighter

2. Using Wanghighlighter.js

Wanghighlighter.js currently supports more than 20 languages in common, and offers 7 common theme styles to choose from.

It's also very simple to apply, with only three steps:

First: Quoting Wanghighlighter.js

Referencing Wanghighlighter.js in the page

<script src= "Js/wanghighlighter-1.0.0-min.js" type= "Text/javascript" ></script>

Second, binding languages and themes

Bind the languages and themes supported by Wanghighlighter.js to a drop-down list for users to choose from, such as:

An array of all languages can be obtained through the Wanghighlighter.getlangarray () method, and an array of all topics can be obtained through the Wanghighlighter.getthemearray () method. So you can use the following code to bind languages and topics:

Language: <select id= "Sltlang" ></select> theme: <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 ($ (' <option> ' + langarray[item] + ' </option> '));            }            For (item in Themearray) {                $sltTheme. Append ($ (' <option> ' + themearray[item] + ' </option> '));            }    }); </script>

Thirdly, the application

Using the Wanghighlighter.highlight (lang, Theme, code) method, the code can be highlighted and returned. Is it simple to pass in a language, a theme, and a string that is ready to be highlighted, and to do it one step at a way?

$btn 1.click (function () {                var code = $txt 1.val (),  //Gets the original string in textarea                    lang = $sltLang. Val (),  //Get language                    theme = $sltTheme. val (),  //Get theme                    Highlightcode;                Highlightcode = wanghighlighter.highlight (lang, theme, code);  Highlight processing code                $div 1.html (Highlightcode);            });

This code achieves effects such as:

3. Application in Wangeditor

Wangeditor is a rich text editor based on Bootstrap, and now uses wanghighlighter.js to implement the "Insert Code" function for Wangeditor! Make Wangeditor a rich text editor with an open source pluggable code that is not uncommon on the internet.

4. Upgrades & Updates

Wanghighlighter.js currently 1.0.0 version, there are still some bugs and flaws to be repaired, I will be constantly updated in my spare time, is it become Rich Text Editor plug-in code function of the right-hand!

In addition, if there is time, I will be wanghighlighter.js of the source design to write an article to explain, including the structure of the program and the application of the regular expression.

JavaScript implementation code highlighting-wanghighlighter.js