text: `<pre>` is drawn as a paragraph in the body font, not as code

Open Beginner friendly
#3,711 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
82/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
rust
Domain
desktop, frontend

Research direction

Start with crates/base/src/text/format/html.rs, especially the BLOCK_ELEMENTS handling, the inline code mark, and the tests that currently expect <pre> to become a paragraph. Compare that path with how fenced code blocks receive monospace styling, then update the <pre> behavior and its tests. Done when <pre> text renders in a monospace font with spacing preserved and the relevant tests pass.

Written by the indexing model from the issue text.

Description

Description

An HTML <pre> block is drawn as a paragraph in the body's proportional font, with no code block box. Its lines and spaces are kept (#3570, #3581), but text lined up with spaces no longer lines up. The HTML standard has <pre> drawn in a monospace font (pre { font-family: monospace; white-space: pre } in its rendering section), as gpui-kit draws a fenced code block.

The cause is in crates/base/src/text/format/html.rs. main has the same code.

  • pre is one of the BLOCK_ELEMENTS (L48) and takes the path for any block element, which makes paragraphs of its text (L658-L683).
  • The HTML minifier keeps <pre>'s white space (html5minify/mod.rs L741-L743), so the lines are kept, but nothing gives them a monospace font.
  • <pre><code>…</code></pre> takes inline code's mark (L410-L412), not a code block.
  • The tests expect a <pre> to be a paragraph (L815-L817, L845-L847).

Environment

  • GPUI: gpui-pre 0.3.10 (the example's default, for the screenshot)
  • GPUI Component: gpui-kit 0.8.1 (v0.8.1, 99576db)
  • Platform: macOS 27.0.1 (arm64). The code is not platform-specific.

Steps to Reproduce

  1. At v0.8.1, run cargo run -p example-markdown.

  2. Replace the editor's text with this:

    <pre>
    name    size
    a.txt     12
    b.txt   3456
    </pre>
    

Expected

The text is in a monospace font, its columns lined up, as in a fenced code block.

The same Markdown as CommonMark's HTML, in Chrome 156 at the preview's width (624px) and text size (16px):

Expected: CommonMark's HTML in Chrome 156

Actual

The text is in the body font with no box, and the numbers do not line up under "size".

The Markdown in step 2 in the example's preview:

Actual: example-markdown with gpui-kit 0.8.1

Dominant language
Rust
Stars
18.9k
Forks
1.2k
Avg merge
1d 3h
Merged PRs (30d)
266

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from longbridge/gpui-kit

All issues in longbridge/gpui-kit

Similar issues

More Rust issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.