Skip to content

Fix Markdown preview monospace fallback when editor font is missing#325629

Open
cipheraxat wants to merge 2 commits into
microsoft:mainfrom
cipheraxat:fix/324256-markdown-preview-monospace-fallback
Open

Fix Markdown preview monospace fallback when editor font is missing#325629
cipheraxat wants to merge 2 commits into
microsoft:mainfrom
cipheraxat:fix/324256-markdown-preview-monospace-fallback

Conversation

@cipheraxat

Copy link
Copy Markdown
Contributor

Summary

  • Markdown preview code used font-family: var(--vscode-editor-font-family, …monospace). CSS only uses the var() fallback when the variable is unset; when editor.fontFamily names a missing font the variable is still set, so code rendered in a proportional/serif face.
  • Append the monospace stack outside var() in preview CSS, notebook markdown code, and workbench pre code, matching how the editor massages font families.
  • Does not change shared webview theming (themeing.ts) to keep blast radius preview-scoped.

Fixes #324256

Test plan

  • Set "editor.fontFamily": "TotallyMissingFontName" (no monospace in the stack)
  • Open a .md with inline `code` and a fenced block; open Markdown Preview
  • Confirm inline and fenced code render monospace
  • With a valid stack (Consolas, monospace), preview fonts look unchanged
  • Body text still follows markdown.preview.fontFamily

When editor.fontFamily names a missing font, CSS var() fallbacks never apply
because the variable is still set. Append a monospace stack outside var() so
preview/notebook/document code keeps a monospace cascade.
Copilot AI review requested due to automatic review settings July 13, 2026 14:48
@cipheraxat

Copy link
Copy Markdown
Contributor Author

Verification

With --vscode-editor-font-family: TotallyMissingFontName (same variable webviews get from editor.fontFamily):

Computed code font-family
Before (var(--x, mono-stack)) TotallyMissingFontName only → proportional/serif
After (var(--x), mono-stack) full cascade ending in monospace

Local Code OSS launch was flaky in this environment, so confirmation used a CSS-faithful preview webview repro of the same var() behavior. Happy to re-test in-product if reviewers want a live preview pass.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes Markdown preview (and related markdown renderers) so inline and fenced code reliably fall back to a monospace font even when --vscode-editor-font-family is set to a missing/invalid font name by appending a monospace stack outside var(--vscode-editor-font-family).

Changes:

  • Update Markdown preview CSS to append a monospace fallback stack after var(--vscode-editor-font-family).
  • Apply the same font-family fallback pattern to notebook markdown rendering CSS.
  • Align workbench markdown document rendering pre code styling with the preview’s improved fallback behavior.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/vs/workbench/contrib/markdown/browser/markdownDocumentRenderer.ts Ensures rendered markdown pre code uses editor font when available but falls back to a monospace stack when it isn’t.
extensions/markdown-language-features/notebook/index.ts Updates notebook markdown code styling to append a monospace stack after the editor font variable.
extensions/markdown-language-features/media/markdown.css Fixes preview code font fallback by moving the monospace stack outside var(), addressing missing-font scenarios.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Markdown preview does not fallback monospace font in code block if editor.fontFamily does not have monospace and font does not exist

3 participants