Skip to content

Improve styling for codeblocks with unrecognized language formats

Description

Follow-up from #118 (comment 2081479094)

Seems to be a common problem for Hugo sites:

One of those workarounds (try enabling syntax guessing, or use a render hook) should fix this up.

It's probably best to fix this at the HTML rendering level (Hugo config/templates) rather than trying to cover up the problem with CSS.

Steps to reproduce

  1. Create a test page: touch content/test.md
  2. Add something like this to test.md: https://gitlab.com/gitlab-org/technical-writing-group/gitlab-docs-hugo/-/snippets/3744667/raw/main/test.md (direct link to the snippet breaks for some reason 🤷)

Actual result

Code block has a white background.

Expected result

Code block has a gray background, like other code blocks.

If it's easy, it could be nice to print a log message in the build log for invalid languages (from 2 minutes of research, this does not look easy/doable, but maybe?).

Edited by Sarah German