Introduction

Code-lighter is a light-weight syntax highlight plugin.

It was written in pure javascript, and no dependcies for other library. It has two themes now and you can custmize your own style. Code-lighter uses a method by parsing and analysing the code and has more accurate then those that using Regex. Currently the language supported are:

  • Javascript
  • HTML
  • CSS

Of course, you can join us and add support for more language.

.ZIP file .TAR file Github

Usage

First wrap the code using <pre> tag.


    <pre>
    <div id='js'>
    // comment line
    function bar(){
        var foo = 'hello';
        var number = 5 * 6 / 20;
        return foo;
    }

    var id = document.getElementById('id');
    window.onload = function() {alert('hello world');};
    </div>
    </pre>

then run

var code = lighter.code({

    target:document.getElementById('js'),

    language:'javascript'

});

now using code.on() or code.off() to turn on/off the highlight.

Theme

using dark theme.

var code = lighter.code({

    target:document.getElementById('js'),

    language:'javascript',

    style:'dark'

});

// comment line
function bar(){
    var foo = 'hello';
    var number = 5 * 6 / 20;
    return foo;
}

var id = document.getElementById('id');
window.onload = function() {alert('hello world');};
using light theme.

var code = lighter.code({

    target:document.getElementById('js'),

    language:'javascript',

    style:'light'

});

// comment line
function bar(){
    var foo = 'hello';
    var number = 5 * 6 / 20;
    return foo;
}

var id = document.getElementById('id');
window.onload = function() {alert('hello world');};

Option

var code = lighter.code({

    target:document.getElementById('js'),

    language:'javascript',

    style:'light'

    lineSpace:4

    lineNumber:false

});

About

The code is under MIT Lisense.

This project is maintained by icymorn