✨MicroLighter: A Zero-Dependency Highlighter at 2KB
A new highlighter that's tiny and dependency-free
TL;DR
MicroLighter is a client-side syntax highlighter that uses CSS Custom Highlights API. It's zero-dependency, about 2KB minified and gzipped, and supports multiple languages in one post.
MicroLighter is a new client-side syntax highlighter using the CSS Custom Highlights API. It's designed to be ultra-lightweight with no dependencies and a size of just 2KB when minified and gzipped. This makes it perfect for developers looking to add code highlighting without bloating their site's load time or adding unnecessary JavaScript libraries. MicroLighter uses Textmate language grammars, supports on-demand loading of languages and themes, and integrates well with web components like <micro-lighter>. It's a game-changer for anyone who needs quick, efficient syntax highlighting in their projects.
Key Points
MicroLighter uses CSS Custom Highlights API and Textmate language grammars, ensuring accurate syntax highlighting across multiple languages.
The highlighter loads all languages and themes on-demand, reducing initial load time and bundle size significantly.
Supports both ESM and web components, with a vanilla component adding about 1 KiB to the overall package.
MicroLighter's theme system merges light and dark modes into one using light-dark() function for easy customization.
The highlighter is self-initializing from minified bundles, making it incredibly simple to integrate on any website.
Why It Matters
If you're building a lightweight web app or blog that needs syntax highlighting but wants to keep things lean, MicroLighter is your new best friend. It's perfect for projects where every byte counts, offering fast load times and seamless integration with minimal setup.
Frequently Asked Questions
Why does this matter?
If you're building a lightweight web app or blog that needs syntax highlighting but wants to keep things lean, MicroLighter is your new best friend. It's perfect for projects where every byte counts, offering fast load times and seamless integration with minimal setup.
What happened?
MicroLighter is a client-side syntax highlighter that uses CSS Custom Highlights API. It's zero-dependency, about 2KB minified and gzipped, and supports multiple languages in one post.
Comments
Be the first to comment
Enjoyed this article?
Get it daily. 7am. Free. Reads in 5 minutes.
Join 3,224 builders reading daily.