markdown: Improve Markdown preview typography and inline code rendering (#63118)
# Objective
The Markdown preview has been collecting complaints about how it reads.
Body text is dimmed and shrunk, headings carry no weight, and paragraphs
sit at a 1.3 line height, so a long document turns into a wall. This
came up in the feedback on #58465, in #58364, and in the discussion at
#43384. This PR changes the defaults so the preview reads like GitHub's
rendering. It adds no settings. The feedback on #60402 and #59544 was
that a good default beats more knobs, and I agree.
## Solution
What changed in the preview:
- Body text renders at the configured `markdown_preview_font_size`.
Before, it rendered at 92% of that value in a blended muted color. It is
now full contrast at 1:1.
- Line height is 1.5 across body text, lists, and blockquotes.
Paragraphs used to override the base line height with `rems(1.3)`.
- Paragraphs, lists, blockquotes, rules, and code blocks are spaced 16px
apart.
- Headings are semibold, from h1 at 1.75rem down to h6 at 0.85rem. Only
h1 and h2 keep a bottom border, same as GitHub. Dropping the h3 border
addresses the comment on #58465 that a line under every heading is too
much.
- Inline code backgrounds are rounded chips instead of square text-run
backgrounds. The chips are tracked in rendered indices so they cover the
code glyphs exactly, and they extend only 1px past the glyphs so the gap
between words stays at full width.
- Code blocks get 12px padding and 6px corners. Links lose their
background tint. Blockquote text is muted. Table cells get 10px
horizontal and 4px vertical padding.
The first commit makes block spacing, table cell padding, and inline
code backgrounds style-driven, with defaults that keep the agent panel,
tooltips, and editor rendering exactly as they are today. The second
commit sets the preview's values. I split it this way so the mechanism
can be reviewed on its own, and so the chip painting can move to its own
PR if you would rather take it separately.
## Testing
- Added a test in the `markdown` crate that checks the inline code chips
cover exactly the code span glyphs, and that no chips are produced when
the corner radius is zero.
- Ran `cargo test -p markdown` and `cargo test -p markdown_preview`
locally, plus `./script/clippy`.
- Smoke-tested the preview on Linux (Arch) against a long document with
headings, lists, blockquotes, tables, and inline code. The screenshots
below are from that run.
- To try it, open any Markdown file and run `markdown: open preview`. It
is also worth glancing at the agent panel and a hover tooltip to confirm
those still look the same, since they share the renderer but keep the
old defaults.
- I could not test on macOS or Windows. Nothing here is
platform-specific, but the chip inset is a fraction of the line height,
so it would be good to have a second pair of eyes on a different font
stack.
## Self-Review Checklist:
- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments (there are none)
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable
## Showcase
| Before | After |
|--------|-------|
| <img width="1420" height="1782" alt="zed_before"
src="https://github.com/user-attachments/assets/84382a52-99d1-43ba-9ee6-d6c3c6cf0cfa"
/> | <img width="1346" height="1800" alt="zed_afterv2"
src="https://github.com/user-attachments/assets/c73c076f-9ba4-4b7d-92dc-20855af595f5"
/> |
Release Notes:
- Improved Markdown preview styling with better typography, spacing, and
rounded inline code backgrounds.
---------
Co-authored-by: Christopher Biscardi <chris@christopherbiscardi.com>
e973593455Daniel Shneyder committed on 8/25/2026, 5:42:06 AM· committed by GitHubparent4ca9005