microlight.js 2.2k

microlight.js is a tiny open-source 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>

Language-agnostic

Unlike other code-highlighting solutions, microlight.js does not keep a set of rules for many languages. Instead it uses a general highlighting strategy providing a reasonable highlight for most of them. 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.

Colorless highlight

microlight.js aims at increasing code readability, not at converting code into rainbow. Instead of changing colors, it only alters font type and look. Such approach has the following benefits:

No need to tune-up the color theme to make it match to the design — it will match out-of-the-box
There is no CSS shipped with microlight.js. The library contains everything needed bundled in 2.2k
Not involving colors makes them available for other purposes, like displaying a diff
Colorless highlight does not put any disadvantages on people with color blindness
It looks cool
okay, this was the primary reason for such a styling

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 (if you prefer to use another class name for the code elements to highlight, provide it to the reset() method as described below). 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();

You can also use this method to specify a custom class name instead of microlight for the elements containing code:

microlight.reset("code");

— will highlight the content inside elements having class=code

Have fun!

microlight.js minified and highlighted by itself