Skip to content

feat(settings): Markdown font family and size - #1164

Open
probertson wants to merge 1 commit into
eneskirca:mainfrom
probertson:feat/markdown-font
Open

probertson wants to merge 1 commit into
eneskirca:mainfrom
probertson:feat/markdown-font

Conversation

@probertson

@probertson probertson commented Oct 8, 2026 •

Copy link
Copy Markdown
Contributor

Adds Markdown font and Markdown font size to Settings → Appearance. Before, the rendered-Markdown views had hard-coded fonts (system sans at 13px, Menlo at 12px for code, fixed-pixel headings), and the only way to change them was UI scale, which zooms the whole app.

Where it applies: the ⌘M output view, the ⌘M chat view (thread and composer), and the editor's Markdown preview. The kanban card's file preview uses the same stylesheet class, so it follows too. Sticky notes are unchanged on purpose.

How it behaves

  • The font picker lists installed reading fonts (sans and serif), plus a System font row (the default) and a free-text CSS stack, like the terminal font picker.
  • Size: 8–28px, default 13.
  • Headings are now proportions of the body size instead of fixed pixels, so they scale with it.
  • Code inside Markdown uses the terminal font family at 0.92 of the Markdown size. Relative rather than the terminal's own size, so code stays in proportion when the Markdown size changes. The chat view's inline code had no font rule before (browser default monospace); it now matches the output view.
  • Defaults reproduce the previous look exactly.

Implementation: @shared/markdown-font holds the defaults and resolvers (settings.json is hand-editable: a non-number size answers the default and is clamped; a family that is empty, too long, or contains ;{}<>\ or control characters answers the default). App.tsx publishes --md-font-family, --md-font-size and --md-code-font-family on <html>; styles.css keeps the defaults on :root and the Markdown rules read the tokens. FontPicker gains optional catalog, buildStack, systemOption and label props; the terminal picker is unchanged. Both new keys are in the Appearance section reset.

Surfaces: Desktop and Server Edition (renderer + settings.json only). Mobile: N/A (its chat view is native).

How it was checked

  • New tests: resolvers (markdown-font.test.ts), a stylesheet pin that every Markdown rule reads the tokens and the :root defaults equal the setting defaults (styles.markdown-font.test.ts), the System font row (FontPicker.test.tsx), and buildProseFontStack.
  • npm run typecheck clean; src/renderer + src/shared suites pass (10,536 tests).
  • In an isolated dev build over CDP: set Georgia / 17px in Settings → Appearance, then measured computed styles. Chat thread and composer were Georgia 17px, h2 25.5px, inline and block code Menlo 15.64px; the output view on a plain terminal was Georgia 17px.
  • Manually on macOS: works as expected.

Not checked: the editor Markdown preview and the kanban file preview by hand (same class as the output view, covered by the stylesheet pin), and the font list on Windows/Linux.

🤖 Generated with Claude Code

The rendered-Markdown views had hard-coded fonts (system sans 13px, Menlo 12px code, fixed-px
headings). Settings → Appearance now has a Markdown font and a Markdown font size, applied to the
⌘M output view, the ⌘M chat view (thread and composer) and the editor's Markdown preview through
CSS tokens App.tsx publishes on <html>. Code inside Markdown uses the terminal font family at 0.92
of the Markdown size; headings scale with the body size. Defaults reproduce the previous look.

FontPicker gains an optional catalogue, stack builder and a "System font" row so it can pick
proportional fonts.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant