Skip to content

Improve code block styling#529

Open
thgoebel wants to merge 4 commits intorhazdon:masterfrom
thgoebel:fix-code-blocks
Open

Improve code block styling#529
thgoebel wants to merge 4 commits intorhazdon:masterfrom
thgoebel:fix-code-blocks

Conversation

@thgoebel
Copy link
Copy Markdown

This PR contains a number of commits to improve the styling of multi-line code blocks. See the commit messages for details.

In particular:

  1. It partially reverts Fix contrast issue in code blocks on light mode #511 to fix Code blocks with syntax highlighting are all caps #527.
  2. It fixes the contrast in plain code blocks in light mode (which Fix contrast issue in code blocks on light mode #511 attempted).
  3. It improves the styling of syntax-highlighted code blocks.

I can amend or drop individual commits based on your feedback.

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">`.
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.
PrismJS has a border, but the plain multi-line code blocks don't.
Therefore, remove it for consisteny.
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.

Code blocks with syntax highlighting are all caps

1 participant