From PrismJS to Better PrismJS to MicroLighter in Three Painless* Steps

An excellent feature of Eleventy1 is the @11ty/eleventy-plugin-syntaxhighlight plugin, which adds build-time syntax highlighting support via PrismJS. Official support keeps 11ty sites from worrying about client-side bloat from JS-based highlighters and the common failure mode of over-including language definitions.2 But nothing's perfect. ContentsLilliputian Adventures In Line NumberingGreener Pastures The official plugin integrates naturally, and I took to using it via the usual triple-backtick markdown syntax: # The Usual Markdown Nonsense { #the-usual-nonsense } And now for something entirely different: ```js function yourCodeHere() { /* ... */ } ``` Etc., etc. This works a treat, until you want a bit more control. At that point, what seems magical starts to feel restrictive. Lilliputian Adventures In Line Numbering A recent goal was to add line numbers. After reading some of the plugin code that invokes PrismJS, I closed my laptop in frustration, unable to cajole…