Skip to content

Fix contrast issue in code blocks on light mode#511

Merged
rhazdon merged 1 commit intorhazdon:masterfrom
herzenschein:contrast-fix
Nov 17, 2025
Merged

Fix contrast issue in code blocks on light mode#511
rhazdon merged 1 commit intorhazdon:masterfrom
herzenschein:contrast-fix

Conversation

@herzenschein
Copy link
Copy Markdown

@herzenschein herzenschein commented Apr 8, 2025

This uses the child combinator selector > to make sure the pre > code block doesn't override the top-level code block unintentionally.

Closes #364.

This uses the child combinator selector > to make sure the `pre > code` block doesn't override the top-level `code` block unintentionally.

Closes rhazdon#364
@rhazdon rhazdon merged commit 8226f64 into rhazdon:master Nov 17, 2025
thgoebel added a commit to thgoebel/hugo-theme-hello-friend-ng that referenced this pull request Mar 27, 2026
This partially reverts rhazdon#511.

Reason: these two selectors are broken.

The first, because a CSS child selector at the top-level, without a parent, has no meaning.

The second, because hugo emits `<code>` so we need an element selector.
The class selector would match `<div class="code">`.
thgoebel added a commit to thgoebel/hugo-theme-hello-friend-ng that referenced this pull request Mar 27, 2026
This is a follow-up to rhazdon#511,
as an alternative fix for rhazdon#364.

Note: this only applies to plain multi-line code blocks.
Multi-line code blocks highlighted by PrismJS still look weird.
@thgoebel
Copy link
Copy Markdown

This PR does three things:

  1. Line 213: Add a leading >.
    • This is broken. A CSS child selector at the top-level, without a parent, has no meaning.
  2. Line 260: Add a leading >.
    • This makes sense. This is the only that thing is needed to achieve the PR description of "make sure the pre > code block doesn't override the top-level code block unintentionally".
  3. Line 260: Change code to .code.
    • This is also broken. The old (correct) version was an element selector (matching <code>). The new version is a class selector (matching <div class="code">. Since hugo emits the former (but not the latter), this change effectively removes this entire styling block. You might as well delete that block.
    • This is likely why you thought that this "fixes" [Bug] code block contrast in white-mode extremly low #364: because the styling is effectively removed, because pre > .code does not match the HTML emitted by hugo.

I came across this PR because I think it is causing #527. See that ticket for more details.

I am proposing an alternative in #529.

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.

[Bug] code block contrast in white-mode extremly low

3 participants