One of the core features of this site is custom syntax highlighting. I had to figure out ways to deal with custom syntax provided by Leanpub. Initially, I implemented a solution based on PrismJS, but I wasn't entirely happy with it, and the frustration led me to look into alternatives. That's how I found Illuminate by Vivek Bansal.
Illuminate is a syntax highlighter which can be used to highlight code snippets in HTML files. It is based on already popular syntax highlighter PrismJS. It can be easily integrated with tools like markdown-it. It can also be used with ReactJS via react-illuminate.
Similar to PrismJS, It works by creating a Token tree, by matching the code string to a given set of Regular Expressions, called a Language definition. Later, The Token tree is again converted to a string by wrapping the code in
span tags and add appropriate class names.
Illuminate was re-written from the ground up in ES6, so that it can be used in NodeJS and browser with the help of tools webpack, rollup, etc., With react-illuminate, it can also be used with ReactJS in the "react way", without using
While working on my website, which is statically generated, I wanted something that can be used with markdown-it on NodeJS. I was already familiar with PrismJS and its inner workings. I had proposed the change in PrismJS itself, but the maintainers were not interested in it. Hence, I started working on my alternative.
Make it stable and add support for other frameworks/tools like Gatsby, Vue, etc.
Do not limit yourselves to a particular framework/paradigm. Keep pushing your limits.
Thanks for the interview Vivek! I have been happy with Illuminate so far and hope others find it useful as well. It's a great little project that deserves kudos.
See Illuminate on GitHub.