Changelog
2026-07-31v0.46.0· Readable Code
Added
-
Code-block theme tokens. Five new tokens (
code-bg,code-fg,code-inline-bg,code-inline-fg,code-block-border) give every theme direct control over the surfaces that BlockNote renders fenced code on. Thekandownpalette ships calibrated defaults for both modes: lightcode-bgis220 14% 96%, close to github-light's white so the bundled Shiki palette's dark token colors keep a WCAG-AA contrast; darkcode-bgis220 15% 11%, close to github-dark's#0d1117for the same reason in reverse. Community theme authors can override any of the five in their JSON without touching the editor. -
Code-block contrast safety net.
applyProjectThemenow runs every theme's mode-specific token map through a purefillCodeTokenshelper, so an installed theme that predates the code tokens (or forgets one) gets the bundledkandowndefaults filled in automatically. A fenced code block can never ship as white-on-white or black-on-black, regardless of which theme is active. -
Live code sample in the theme preview card. The
ThemePreviewCardon the Settings → Themes screen now renders a small fenced block plus an inlinecodepill in the same isolated scope as the mini-board, so a theme author can see whether their code palette reads before saving. -
Forced monospace on every code surface.
globals.cssapplies--font-monoto every code block, inlinecode, Tailwind.prosecode, and bare<code>element. Even a non-mono display font keeps the columns aligned. -
Inline
codestyling. Single-backtick code spans inside body prose (e.g.t1,t2,BUG-001) render as a pill withcode-inline-bgandcode-inline-fg, both themable. -
11 contract tests in
src/lib/__tests__/code-block-tokens.spec.tslock the safety net: every theme ships every code slot, thekandowndefaults are mode-flipped, the bg/fg lightness gap is at least 50 in each mode,fillCodeTokensbackfills exactly the missing slots, never overrides a defined value, does not mutate its input, and is mode-aware.
Fixed
- Unreadable code blocks on tinted community themes. The previous
styling forced the
prebackground tohsl(var(--muted))and tried to force the text tohsl(var(--foreground)) !important, but Shiki injects its token colors as inlinestyle="color: #xxx"on each<span>, which wins over the parent rule. On any theme with a tinted--mutedslot, the spans rendered with low or no contrast against the muted background. Fenced code is now always readable on every theme, with monospace forced and the Shiki palette preserved.
Changed
applyProjectThemenow routes its mode-specific token map throughfillCodeTokens. No behavior change for themes that already declare every code token; safety net only kicks in when something is missing..prose preand.prose codenow reference--code-bg/--code-fg/--code-inline-bg/--code-inline-fginstead of--muted/--foreground, so a future Tailwind prose page picks up the same themed surfaces.