lolight

tokenizer and syntax highlighter

1.4.0

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">
    ...
</pre>

API

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

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

// styles the given HTML element
lolight.el(element);

// returns an array of tokens
lolight.tok(string);

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!