microlight.js 2.2k

microlight.js is an open-source micro-library which improves readability of code snippets by highlighting, for any programming language, without attaching additional language-packages or styles:

<html> <head> <title>My page</title>  <script type="text/javascript"> /** * Bubble-sorts the input array */ function(input) { // switches the two elems if needed // returns true if switched function switchEls(idx) { var switched = false; if (input[idx] < input[idx-1]) { var tmp = input[idx]; input[idx] = input[idx-1]; input[idx-1] = tmp; switched = true; } return switched; } var switched; do { switched = false; for (var i = 1; i < input.length; i++) { switched |= switchEls(i); } } while (switched); return input; } </script>  <style> body { background-color: black; } h1 { color: white; font-family: monospace; } </style> </head> <body> <h1>Welcome to my page</h1>  <?php // write "Hello world!" 10 times for ($i = 1; $i <=10; $i++) { echo "Hello world!<br/>"; } ?> </body> </html>

Unlike other code-highlighting solutions, microlight.js does not keep a set of rules for most languages. Instead it uses a general highlighting strategy providing a reasonable highlight for most of programming languages. As result:

The library size is extremely compact
2.2k, seriously, can you imagine!
You don't need to specify which language is that
and you don't need to bother users with this as well
The code can be mixed containing several languages
just like in the example above

In fact, microlight.js does not care about what language the code is written in, nor does it care about the code structure. It just goes through the code and highlights it.

During the highlighting, microlight.js does not change the color —, it only alters font type and look. Therefore, you don't need to tune-up the color theme to make it match to the design of the page —. It will always match! In fact, there is no CSS shipped with microlight.js at all, only the library itself, containing everything needed, all in 2.2k!

Compatibility

microlight.js is written in vanilla-js and is shipped as a UMD-module, so it should work in any reasonable environment. The library was successfully tested on recent versions of major browsers:

10+

12+

14+

Setting-up

Download and unpack the distribution, or install it using bower / npm:

$ bower install microlight

$ npm install microlight

Load microlight.js in a preferable way (as a UMD-module):

Create an element with code content to be highlighted, and add the microlight class. Don't forget to mask the html-related characters, and apply the monospace style:

.microlight { font-family : monospace; white-space : pre; }

The result will look like this:

for (var i = 0; i<=10; i++) { // say hello echo("hello"); }

Tune-up the element style according to your taste:

.microlight { font-family : monospace; white-space : pre; background-color : #C4E4E8; color : #052C36; }

— looks like this:

for (var i = 0; i<=10; i++) { // say hello echo("hello"); }

If you change the content on the fly, or switch the style of an element with the highlighted code, or add the microlight class to the new nodes, invoke the following to re-apply the highlight:

microlight.reset();

Have fun!

microlight.js minified and highlighted by itself