Code blocks produced by code shortcode has wrong background colors

[i-give-up]

Seems to only happen to code blocks that are syntax-highlighted, i.e. <pre> elements that are wrapped in <div class="highlight">.

You can see affected code blocks on List Page Templates page but the issue is present in other pages too.

Below is a screenshot of the List Page Templates page that illustrates this issue. The code block above isn't syntax-highlighted so it doesn't have this issue whereas the code block below is syntax-highlighted and thus exhibiting this issue.

The cause seems to be this CSS rule background-color: inherit; for .highlight pre which causes <pre> to inherit the blue background color of the containing <div> block. There is a background-color: #f0f0f0; for .chroma but it isn't used due to lower specificity.

I think removing these two CSS properties for .highlight pre should fix this

• background-color: inherit;
• padding: .5em;

As far as I can tell, these properties are there because the output of Pygments (default syntax highlighter up until Hugo 0.27) doesn't have <code> inside <pre>.

I wonder if a new rule should be added instead

.highlight pre.chroma {
    background-color: #fff;
    padding: 0;
}

so that regardless of which syntax highlighter one is using, those code blocks won't look weird.

[digitalcraftsman]

Hello @i-give-up,

thanks for opening this issue. Some users on Twitter mentioned it as well. As this issue has to be fixed in the repo for the docs' theme I created an issue there. However, I'll link your issue as a reference since it contains some helpful details.