tokenizer and syntax highlighter


Lightweight tokenizer and syntax highlighter, less than 3kB of minified code. No language specific syntax support, just a CSS stylable breakdown into tokens. Default styles included.

Easy usage: just add the script to your page. On page-ready the text content of all HTML elements with class lolight is highlighted with a basic style set as seen on this demo page.

<script src="lolight.min.js"></script>
<pre class="lolight">


Besides the drop-in use case described above the library publishes the global function lolight().

// styles all matching elements
// selector optional, defaults to '.lolight'

// styles the given HTML element

// returns an array of tokens

Default Styles

Overwrite these rules to your likings in your own CSS styles.

.ll-nam { /* words */
    color: #2196f3;
.ll-num { /* numbers */
    color: #ec407a;
.ll-str { /* strings */
    color: #43a047;
.ll-rex { /* regular expressions */
    color: #ef6c00;
.ll-pct { /* operators, punctation */
    color: #666;
.ll-key { /* keywords */
    color: #555;
    font-weight: bold;
.ll-com { /* comments */
    color: #aaa;
    font-style: italic;
Works best with JavaScript enabled!Works best in modern browsers!