is a tiny open-source library which improves readability of code snippets by , 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>


Unlike other code-highlighting solutions, 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:

In fact, 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 .

Colorless highlight

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:


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:



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

$ bower install microlight
$ npm install microlight

Load 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 class (if you prefer to use another class name for the code elements to highlight, provide it to the 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&lt;=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 class to the new nodes, invoke the following to re-apply the highlight:


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

— will highlight the content inside elements having class=code

Have fun!

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&&"\n"==w||[/\S/[r](w),1,1,!/[$\w]/[r](w),("/"==f||"\n"==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)});