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…

Commenting on Bubbles has been removed. Why? If you want to talk about this post, write to the author, use the comments on their blog if it has them, or reply with a "RE:" post on your own blog. Suggestions? feedback@bubbles.town