lolight
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">
...
</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;
}