Skip to content

Add inline_code_background field to TextViewStyle#2146

Open
KlausUllrich wants to merge 3 commits intolongbridge:mainfrom
KlausUllrich:feature/inline-code-background-style
Open

Add inline_code_background field to TextViewStyle#2146
KlausUllrich wants to merge 3 commits intolongbridge:mainfrom
KlausUllrich:feature/inline-code-background-style

Conversation

@KlausUllrich
Copy link
Copy Markdown
Contributor

@KlausUllrich KlausUllrich commented Mar 12, 2026

Summary

Adds an inline_code: StyleRefinement field to TextViewStyle, giving consumers full style control over inline code spans (backtick text). Follows the same pattern as the existing code_block: StyleRefinement field.

Problem

Inline code currently uses cx.theme().accent as its background highlight. The accent color is designed for interactive/attention-grabbing elements (buttons, links, selections), which makes it visually heavy when applied to inline code mixed with body text. There's no way to customize this without forking or vendoring the crate.

Solution

Add a new StyleRefinement field to TextViewStyle with a builder method, matching code_block:

// In TextViewStyle:
pub inline_code: StyleRefinement,

// Builder:
pub fn inline_code(mut self, style: StyleRefinement) -> Self

Default behavior is unchanged — when the field is StyleRefinement::default(), inline code continues to use cx.theme().accent exactly as before. Consumers who want a different background can set it:

let mut inline_style = StyleRefinement::default();
inline_style.text.background_color = Some(my_color);
let style = TextViewStyle::default().inline_code(inline_style);

Implementation

Two files changed:

  • crates/ui/src/text/style.rs: Added inline_code: StyleRefinement field, StyleRefinement::default() default, and builder method
  • crates/ui/src/text/node.rs: In Paragraph::render(), reads node_cx.style.inline_code.text.background_color with fallback to cx.theme().accent

The render path uses text.background_color (not element-level background) because inline code renders as a text-run highlight via HighlightStyle, not a container div.

Backwards Compatibility

Fully backwards compatible:

  • New field defaults to StyleRefinement::default() → existing behavior preserved
  • No changes required for existing consumers
  • API is consistent with code_block field

cargo check passes cleanly.

Adds an `inline_code_background: Option<Hsla>` field to `TextViewStyle`,
allowing consumers to customize the background color of inline code spans
(backtick text in markdown).

When the field is `None` (the default), behavior is unchanged — inline
code uses `cx.theme().accent` as before. When set via the new
`.inline_code_background(color)` builder method, the provided color is
used instead.

This follows the same pattern as the existing `heading_font_size` field:
an `Option` with a sensible default fallback, plus a builder method on
`TextViewStyle` for ergonomic configuration.

Motivation: `cx.theme().accent` is designed for interactive elements
(buttons, links) and can be visually heavy for inline code mixed with
body text. This field lets consumers choose a subtler background without
forking or vendoring the crate.

Also adds a clarifying comment on the hand-written `PartialEq` impl
noting which fields are intentionally excluded from comparison.
@KlausUllrich KlausUllrich force-pushed the feature/inline-code-background-style branch from 2acff2e to 987d0c2 Compare March 12, 2026 15:26
Comment thread crates/ui/src/text/style.rs Outdated
pub code_block: StyleRefinement,
/// Background color for inline code spans (backtick text).
/// Defaults to `cx.theme().accent` when `None`.
pub inline_code_background: Option<Hsla>,
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Use StyleRefinement like the code_block.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thanks for the review! Good call — I've updated the PR to use StyleRefinement for consistency with code_block.

Changes:

  • Renamed inline_code_background: Option<Hsla>inline_code: StyleRefinement
  • Builder method now matches code_block's signature
  • Fully backwards compatible — StyleRefinement::default() preserves existing behavior

Implementation note: the render path reads inline_code.text.background_color (not element-level background) because inline code renders as a text-run highlight via HighlightStyle, not a container div. text.background_color maps directly to HighlightStyle.background_color — and since Background.solid is pub(crate) in gpui, extracting Hsla from Fill::Color isn't possible from downstream crates.

Will push the updated code shortly.

Per reviewer feedback, use `StyleRefinement` for consistency with
the existing `code_block` field. The render path reads
`inline_code.text.background_color` (text-level) rather than
element-level `background`, since inline code renders as a text-run
highlight via `HighlightStyle`, not a container div.

Fully backwards compatible — `StyleRefinement::default()` preserves
existing behavior (falls back to `cx.theme().accent`).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Comment thread crates/ui/src/text/node.rs Outdated
.text
.background_color
.unwrap_or(cx.theme().accent);
highlight.background_color = Some(bg);
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I just realized this is a HighlightStyle type.

  1. If modifying the background_color is supported, then there will be other corresponding modifications.

  2. Since the inline_code is an inline style, it should use HighlightStyle instead of StyleRefinement. However, HighlightStyle may not have a refine method, so this is more complex and cannot be modified so simply.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Thank you for the feedback. You were right — HighlightStyle is the correct abstraction for inline text spans. I have updated the PR:

  • inline_code field is now HighlightStyle instead of StyleRefinement
  • The render path merges via .highlight(), which means all HighlightStyle properties (color, weight, style, background, underline, strikethrough) are now supported for inline code
  • Default behavior is unchanged: when no background is set, falls back to cx.theme().accent

Backwards compatible — HighlightStyle::default() preserves existing rendering for consumers who do not set a custom style.

Per review feedback: inline code is a text span, not a box element.
HighlightStyle is the correct abstraction — it supports color, weight,
style, background, underline, and strikethrough for text runs.

- Changed `inline_code` field type from StyleRefinement to HighlightStyle
- Render path now merges via `.highlight()` instead of extracting a single field
- All HighlightStyle properties (bold, italic, color, underline, etc.) now work
  for inline code spans
- Default behavior unchanged: falls back to cx.theme().accent when no
  background is set
- Fully backwards compatible: HighlightStyle::default() preserves existing
  rendering for consumers who do not set a custom style

Co-Authored-By: Claude Opus 4.6 (1M context) <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.

2 participants