markdown: Improve Markdown preview typography and inline code rendering

[archcorsair]

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 Improve markdown preview styles #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:

• I've reviewed my own diff for quality, security, and reliability
• Unsafe blocks (if any) have justifying comments (there are none)
• The content adheres to Zed's UI standards (UX/UI and icon guidelines)
• Tests cover the new/changed behavior
• Performance impact has been considered and is acceptable

Showcase

Before	After

Release Notes:

• Improved Markdown preview styling with better typography, spacing, and rounded inline code backgrounds.

[cla-bot]

We require contributors to sign our Contributor License Agreement, and we don't have @archcorsair on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

[archcorsair]

@cla-bot check

[cla-bot]

The cla-bot has been summoned, and re-checked this pull request!

[ChristopherBiscardi]

Overall the changes seem reasonable. I've checked a few themes, macos rendering, the agent panel, and chip styling across themes.

It looks like this also fixed an issue with the experimental titlebar overrides applying to table headings.

before

after

[ChristopherBiscardi]

Thanks!

[Arcitec]

Wow wow wow wow wow, I just built this and tested it. It's perfect! Text is now breathable and nicely spaced out, with good font sizes and larger headings, so that it doesn't feel like a cramped wall of text anymore. I think this will stop the "Zed's markdown preview is so bad" complaints. :D

The improvement is very noticeable on the markdown tables in particular.

Thank you for doing this!

Before:

After:

[Arcitec]

@ChristopherBiscardi I noticed one bug. Zed doesn't render bold text despite the "SF Pro" Apple font supporting it. Try viewing documents with bold in them. It just appears exactly like all the other text. Only italics works.

To see if the font was the problem, I went into Zed's UI font settings and changed the weight from 400 to 900 and the font became bold in the UI. But not in the Markdown view.

I am suspecting that the markdown renderer doesn't use font weight properly?

PS: The default ZedSans font has working Bold support in markdown preview.

Edit: Okay, only the SF Pro font has this issue. But that font supports bold and it works properly in other applications, so I am suspecting that Zed doesn't apply font-weight in a normal way.

[archcorsair]

@Arcitec I can take a look and open a follow up PR if needed. I'll check it out when I'm back in front of my computer

[Arcitec]

@archcorsair Thank you. I think it looks like a problem in Zed's GPUI renderer (and I saw something about Cosmic Text for font rendering?) so it may be an upstream issue. I say this because I noticed that many parts of the Zed UI doesn't become bold when I set the UI Font Weight to 900. Only some parts do. It's strange. Perhaps it's also an issue with how Zed applies the font weight property.

I know the font is okay and has bold support. It works in literally every other application since I use it system-wide on Linux. But it's an advanced font that uses the newest OpenType features to apply scaling such as bold etc, so maybe it's too advanced for this font renderer.

Linux's own FreeType renderer supports these advanced OpenType fonts.

I'll make some instructions for how I installed the font, so you can be sure you have it:

curl -O https://devimages-cdn.apple.com/design/resources/download/SF-Pro.dmg

7z e SF-Pro.dmg -ir'!*Fonts.pkg' -aoa SF-Pro.dmg

7z e -aoa "SF Pro Fonts.pkg" "SFProFonts.pkg/Payload"

7z e Payload

mkdir fonts && cd fonts

7z e -ir'!*.otf' '-ir!*.ttf' '-ir!*.ttc' -aoa "../Payload~"

# Delete legacy fonts:
rm -f SF-Pro-Display-*.otf SF-Pro-Text-*.otf

Then you can install the fonts to your system as usual. The specific font I am using just needs these two files:

SF-Pro.ttf
SF-Pro-Italic.ttf

[archcorsair]

Follow-up PR: #63465