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> <!-- some embedded js --> <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> <!-- a little bit of css --> <style> body { background-color: black; } h1 { color: white; font-family: monospace; } </style> </head> <body> <h1>Welcome to my page</h1> <!-- and finally php --> <?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

You don't need to specify which language is that

The code can be mixed containing several languages

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

. 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

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+ 9+ 14+ 7+

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):

<script src="path/to/microlight.js"></script>

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:

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

.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");

Have fun!

microlight.js minified and highlighted by itself

!function(e,t){"function"==typeof define&&define.amd?define(["exports"],t):t("undefined"!=typeof exports?exports:e.microlight={})}(this,function(e){var t,i=window,n=document,o="appendChild",r="test",a=";text-shadow:",l="opacity:.",s=" 0px 0px ",c="3px 0px 5",d=")",u=n.getElementsByClassName("microlight"),f=function(e){for(e=0;t=u[e++];)for(var f,p,h,g,m,y=t.textContent,x=0,b=y[0],w=1,v=t.innerHTML="",k=0,C=/(\d*\, \d*\, \d*)(, ([.\d]*))?/g.exec(i.getComputedStyle(t).color),N="px rgba("+C[1]+",",E=C[3]||1;p=f,f=7>k&&"\\"==f?1:w;){if(w=b,b=y[++x],g=v.length>1,!w||k>8&&"

"==w||[/\S/[r](w),1,1,!/[$\w]/[r](w),("/"==f||"

"==f)&&g,'"'==f&&g,"'"==f&&g,y[x-4]+p+f=="-->",p+f=="*/"][k])for(v&&(t[o](m=n.createElement("span")).setAttribute("style",["",a+s+9+N+.7*E+"),"+s+2+N+.4*E+d,l+6+a+s+7+N+E/4+"),"+s+3+N+E/4+d,l+7+a+c+N+E/5+"),-"+c+N+E/5+d,"font-style:italic;"+l+5+a+c+N+E/4+"),-"+c+N+E/4+d][k?3>k?2:k>6?4:k>3?3:+/^(a(bstract|lias|nd|rguments|rray|s(m|sert)?|uto)|b(ase|egin|ool(ean)?|reak|yte)|c(ase|atch|har|hecked|lass|lone|ompl|onst|ontinue)|de(bugger|cimal|clare|f(ault|er)?|init|l(egate|ete)?)|do|double|e(cho|ls?if|lse(if)?|nd|nsure|num|vent|x(cept|ec|p(licit|ort)|te(nds|nsion|rn)))|f(allthrough|alse|inal(ly)?|ixed|loat|or(each)?|riend|rom|unc(tion)?)|global|goto|guard|i(f|mp(lements|licit|ort)|n(it|clude(_once)?|line|out|stanceof|t(erface|ernal)?)?|s)|l(ambda|et|ock|ong)|m(icrolight|odule|utable)|NaN|n(amespace|ative|ext|ew|il|ot|ull)|o(bject|perator|r|ut|verride)|p(ackage|arams|rivate|rotected|rotocol|ublic)|r(aise|e(adonly|do|f|gister|peat|quire(_once)?|scue|strict|try|turn))|s(byte|ealed|elf|hort|igned|izeof|tatic|tring|truct|ubscript|uper|ynchronized|witch)|t(emplate|hen|his|hrows?|ransient|rue|ry|ype(alias|def|id|name|of))|u(n(checked|def(ined)?|ion|less|signed|til)|se|sing)|v(ar|irtual|oid|olatile)|w(char_t|hen|here|hile|ith)|xor|yield)$/[r](v):0]),m[o](n.createTextNode(v))),h=k&&7>k?k:h,v="",k=11;![1,/[\/{}[(\-+*=<>:;|\\.,?!&@~]/[r](w),/[\])]/[r](w),/[$\w]/[r](w),"/"==w&&2>h&&"<"!=f,'"'==w,"'"==w,w+b+y[x+1]+y[x+2]=="<!--",w+b=="/*",w+b=="//","#"==w][--k];);v+=w}};e.reset=f,"complete"==n.readyState?f():i.addEventListener("load",f,0)});