Alex Russell6 min readintermediate
From PrismJS to Better PrismJS to MicroLighter in Three Painless* Steps
Summary
The author describes evolving syntax highlighting on their Eleventy site, starting from the default PrismJS plugin to a custom server-side hack for line numbers. They then detail integrating MicroLighter, a client-side web component, by leveraging Eleventy's bundler for conditional loading and managing content escaping for optimal performance.
- Eleventy's PrismJS plugin can be extended for line numbers by wrapping lines in `<span>` via a paired shortcode and using CSS counters.
- Customizing Eleventy's syntax highlighting often requires leveraging paired shortcodes and string manipulation for output control.
- The 11ty Bundler is crucial for conditionally loading client-side syntax highlighting JS/CSS and preloading language definitions.
- Integrating client-side web components like MicroLighter into Eleventy requires careful handling of Nunjucks and Markdown content escaping.
Engineers building static sites with Eleventy can learn advanced techniques for customizing syntax highlighting, managing client-side dependencies, and integrating web components for better performance and flexibility.
7/10
