Fixes ugly background text in pre/code blocks

[benc-uk]

Currently there's strange looking grey background behind the text in code blocks on the kubernetes.io site, e.g.

This crops up in any code block (of which there are hundreds in the Kubernetes docs) e.g.
https://kubernetes.io/docs/tasks/inject-data-application/define-environment-variable-container/
https://kubernetes.io/docs/concepts/workloads/controllers/deployment/#creating-a-deployment
And countless other places

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[benc-uk]

@googlebot I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[LisaFC]

This looks great but I'm just going to make sure that fixing the more general problem in #214 doesn't fix your problem as well - I think it's only happening in sites using Hugo 0.60 and above.

[LisaFC]

Have a look at #312, I think that should fix it because it means you just get the Chroma highlighting CSS for your code blocks and we don't hard code any colors at all except for inline and non-language-specified code.

It does mean you need to update your config.toml as well as the template but that should be ok?

[LisaFC]

@benc-uk Can you try updating to the latest Docsy and see if it fixes your problem without the need for this PR? You will probably need to update your config.toml to use Tacoma as the highlight style too. Docs for new syntax highlighting stuff is here: https://www.docsy.dev/docs/adding-content/lookandfeel/#code-highlighting

[benc-uk]

I've pulled the Kubernetes site down as a clone, updated the docsy submodule to the latest and I still see the grey around the text. I changed the highlight style to tacoma in config.toml and the problem goes away (as the highlight blocks are black) but it's not in my remit to change this for the whole of the Kubernetes site.
I was hoping this would have been a quick fix.

[LisaFC]

Hmm, that's odd, as it's fixed the same problem for another user in the original #214. I'm not sure where the grey is coming from as I've removed the hard-coded colour for pre blocks in the CSS. Let me have another look. Looking at the K8s site it seems to be only affecting certain codeblocks so I'll have a look at the source.

Do you know what version of Hugo the K8s site is using?

[LisaFC]

AHA. I think I see where the problem is coming from. It's only happening in codeblocks created by the "codenew" shortcode and it looks like because those blocks are generated inside a table you're actually getting the style for "code inside a table" overriding the regular "code inside a pre". Let me do some further experimentation.

[benc-uk]

Thanks for sticking with this!
It's a silly, minor thing really

[LisaFC]

Heh, no worries, it's the kind of odd niggly problem that bothers me until I figure it out!

[LisaFC]

Ok, I think I've fixed it! See if #314 fixes it for you and I'll get it in if it does.

[benc-uk]

Just tried building the Kubernetes site with your LisaFC-code-colour docsy branch and it seems to have fixed it 🥇
I think we can close this clumsy workaround of mine

Thanks for the fix ✨