Skip to content

Fix inline code font size in headings#2220

Open
standard-librarian wants to merge 4 commits intoelixir-lang:mainfrom
standard-librarian:fix/inline-code-in-headers
Open

Fix inline code font size in headings#2220
standard-librarian wants to merge 4 commits intoelixir-lang:mainfrom
standard-librarian:fix/inline-code-in-headers

Conversation

@standard-librarian
Copy link

@standard-librarian standard-librarian commented Mar 22, 2026

Summary

Inline code inside headings was rendered at the fixed body code size (--text-sm, 0.875rem / 14px) regardless of heading level. Because rem is root-relative rather than parent-relative, a <code> inside an <h2> (28px on wider screens) rendered at roughly half the size of the surrounding heading text, creating jarring visual inconsistency.

Fix: add a single CSS rule in assets/css/content/code.css so inline code inside headings uses font-size: 1em, inheriting and scaling with the parent heading's font size. Both HTML and EPUB outputs share this file so both formats are fixed.

.content-inner :is(h1, h2, h3, h4, h5, h6) code {
  font-size: 0.875em;
}

Fixes #2218

Inline code inside headings was rendered at the fixed body code
size (--text-sm, 0.875rem) regardless of heading level, causing
visual inconsistency where code appeared much smaller than the
surrounding heading text.

Set font-size to 1em inside headings so code inherits and scales
with its parent heading's font size.

Fixes elixir-lang#2218
@standard-librarian
Copy link
Author

before the fix:
image
after:
image

Copy link
Contributor

@eksperimental eksperimental left a comment

Choose a reason for hiding this comment

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

Thank you

Co-authored-by: Eksperimental <eksperimental@autistici.org>
@eksperimental
Copy link
Contributor

While it's OK while this is a draft, test/examples/inline_code_headers.md should be removed from the PR before being merged as it will end up being part of the ExDoc documentation.

@standard-librarian
Copy link
Author

@eksperimental thank you for reminding me, i added it to show the new changes and should have removed it once we discussed it.
now it's removed

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

Labels

None yet

Development

Successfully merging this pull request may close these issues.

Inline code in header looks weird

2 participants