Share a lightweight code highlight plug-in-jshighlight

ArticleDirectory

• Plug-in features
• Actual Effect
• Plug-in Homepage
• Upgrade history

Jshighlight-a javascript-based lightweightCodeThe coloring plug-in is easy to use and has less code. Although native only supports HTML, CSS, and JavaScript, it can also be extended to support other languages. The following describes how to expand it, this blog has replaced the bloated plug-in with jshighlight. For more information, see the code in this article. The following briefly introduces some of her information:

Plug-in features

1. Truly lightweight, JavaScript code compressed about 3 K;
2. Easy to call. Just introduce the jshighlight core JS file;
3. Independent from any other database;
4. Native support for HTML, CSS, and JavaScript;
5. Supports easy extension of other languages;
6. The row number is displayed. Copying the Code directly does not copy the row number;
7. Four themes are available. monokai themes are used by default;

Procedure

1. Introduce the corresponding Style File in

   <! -- Default style --> <link href = "../theme/jshighlight-default.css" rel = "stylesheet"/>

2. Introduce the corresponding JS file before </body>:

   <! -- Core JS file --> <SCRIPT src = "../JS/jshighlight. core-v1.0.1.min.js"> </SCRIPT>

3. Add the 'data-language 'attribute to the PRE Tag to be colored. The value is 'javascript' | 'html '| 'css'. You can set other values after extension;

How to expand

2. Introduce the corresponding JS file in </body>:

   <SCRIPT src = "../JS/jshighlight. core-v1.0.0.min.js"> </SCRIPT>

4. customize the style required by the language to be colored, for example:

   . php-com {color: # CCC ;}. php-MRK {color: red; font-weight: bold ;}. php-Bol {color: # f92665; font-style: italic ;}. php-var {color: # a6e22e ;}....... /* You can also use the default style and pass in the default style class name. * The style name can be used freely. For example, you can also use the corresponding style annotation. the default key * style is as follows :*/. com {color: # 75715e}/* normal comment */. doc {color: #48 beef}/* Document comment */. STR {color: # e6db74}/* string */. key {color: #48 beef; font-weight: bold; font-style: italic}/* keyword */. OBJ {color: # ae81ff; font-weight: bold}/* built-in object, function */. num {color: # f92672}/* Number */. OPE {color: # fd971f}/* operator */. BOL {color: # ff5600; font-style: italic}/* Boolean value */. MRK {color: # f92665}/* HTML Tag */. ATTR {color: # a6e22e}/* attribute name */. val {color: # e6db74}/* attribute value */

6. Define the regular expression for extracting the content to be colored, for example:

   'Com':/(\/\ * [\ S] *? \ * \/| \/. * | & Lt ;\!--[\ S] *?--& Gt ;)/,// Normal comment'Mrk':/(& Lt ;\? PHP | \? & Gt ;)/,// Tag'Str':/('(? :(? : \ '| [^'\ R \ n]) *?) '|"(? :(? : \ "| [^"\ R \ n]) *?) ")/,// String |

7. Call the extendlanguage method of jshl:

   Jshl. extendlanguage ('php', {/** style class name corresponding to each group * For example, 'com 'has a group and 'mrk' has a group, there are two groups in 'key'. * The group in COM corresponds to 'php-com', and the Group in 'mrk' corresponds to * 'php-mrk ', the first group in 'key' corresponds to 'str', the second group corresponds to 'key', and so on; */CLS: ['php-com', 'php-mrk ', 'str', 'key', 'php-var', 'obj ', 'num', 'php-bol', 'ope'], Reg: {'com ': /(\/\ * [\ s] *? \ * \/| \/. * | <\! -- [\ S] *? -->) //, // Common comment 'mrk':/(<\? PHP | \?>) //, // Tag 'str ':/('(? :(?: \ '| [^' \ R \ n]) *?) '| "(? :(?: \ "| [^" \ R \ n]) *?) ") //, // String 'key ':/(?: [^ $ _ @ A-zA-Z0-9])? (And | or |... | throw )(?! [$ _ @ A-zA-Z0-9])/, // keyword 'var':/(\ $ [\ W] [\ W \ D] *)/, // variable name 'obj ':/(?: [^ $ _ @ A-Za-z0-9])? (Echo |... | date )(?: [^ $ _ @ A-Za-z0-9]) //, // built-in function (partial) 'num':/\ B (\ D + (?: \. \ D + )? (?: [EE] [-+]? (?: \ D) + )?) \ B/, // number 'bol ':/(?: [^ $ _ @ A-Za-z0-9])? (True | false )(?: [^ $ _ @ A-Za-z0-9]) //, // Boolean value 'ope ': /(==|=|==|\+ |-|\+ = |-=|\* =|\\=|%=|<|<=|> | >=| \.) /// operator}, // if the language is included in HTML, set the following attributes wrapper: 'html', content: {LANG: 'php', // language name, the data-language consistency of the PRE Tag wrapper:/()/g // The format of the Code to be colored }})

   Actual effect 1. Default theme-monokai 2. iplastic Theme 3. Eiffel theme 4. blackboard theme plugin home page https://github.com/daiying-zhang/jshighlight update History version 1.0.21. Fix code "//...." The bug "|" is added at the end of the Form. Thank you for choosing here. @ Withered leaf Feedback this bug; click to download

Reprinted from: http://www.sanjh.cn/fen-xiang-yi-ge-qinag-liang-ji-yu-fa-gao-liang-cha-jian-jshighlight.html