Code Blocks Get Real Colors, and Each Site Can Choose Its Own
A new highlight import colors code with Shiki, using a default palette that follows every mode and CSS variables a site can override.
Why Care?
Code on our sites rendered in one color. LFM parses Markdown into a tree that each site renders itself, so Astro’s built-in Shiki never sees those code blocks. Doing the highlighting here means every site can share it instead of wiring up its own.
What’s New?
highlightCode(code, language)from@lossless-group/lfm/highlightreturns escaped, colored HTML. A missing or unknown language stays plain.- A default palette: purple keywords, green strings, blue functions, and orange constants. Lightness comes from the site’s text color, so it follows every mode.
- Per-site colors: set
--lfm-code-token-keywordand the other variables in a site’s theme CSS. The README lists them.
How It Was Checked
Every token measured at 5.4:1 contrast or better in Chrome, across the light, dark, and vibrant modes of six splashes. A site that overrides a color owns its contrast.
Sites still need to call highlightCode in their CodeBlock, so none change until
they adopt it.