Skip to content

Active development — do not use in production yet. Build-in-public project. First stable release: v1.0.0. Expect breaking changes, missing features and rough edges before then.

kandown
108 releases

Changelog

2026-07-31

v0.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. The kandown palette ships calibrated defaults for both modes: light code-bg is 220 14% 96%, close to github-light's white so the bundled Shiki palette's dark token colors keep a WCAG-AA contrast; dark code-bg is 220 15% 11%, close to github-dark's #0d1117 for 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. applyProjectTheme now runs every theme's mode-specific token map through a pure fillCodeTokens helper, so an installed theme that predates the code tokens (or forgets one) gets the bundled kandown defaults 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 ThemePreviewCard on the Settings → Themes screen now renders a small fenced block plus an inline code pill 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.css applies --font-mono to every code block, inline code, Tailwind .prose code, and bare <code> element. Even a non-mono display font keeps the columns aligned.

  • Inline code styling. Single-backtick code spans inside body prose (e.g. t1, t2, BUG-001) render as a pill with code-inline-bg and code-inline-fg, both themable.

  • 11 contract tests in src/lib/__tests__/code-block-tokens.spec.ts lock the safety net: every theme ships every code slot, the kandown defaults are mode-flipped, the bg/fg lightness gap is at least 50 in each mode, fillCodeTokens backfills 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 pre background to hsl(var(--muted)) and tried to force the text to hsl(var(--foreground)) !important, but Shiki injects its token colors as inline style="color: #xxx" on each <span>, which wins over the parent rule. On any theme with a tinted --muted slot, 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

  • applyProjectTheme now routes its mode-specific token map through fillCodeTokens. No behavior change for themes that already declare every code token; safety net only kicks in when something is missing.
  • .prose pre and .prose code now reference --code-bg / --code-fg / --code-inline-bg / --code-inline-fg instead of --muted / --foreground, so a future Tailwind prose page picks up the same themed surfaces.