Making hugo's server side code styling work with the theme's styling of pre

support
1

It seems that Hugo’s server side styling only styles the code element.

But content is actually inside code and pre.

So themes like bootstrap which style the background of the pre element, override the background of the pygment style. This breaks the code styling, because the foreground color of text is rendered with the pygments style, and the background from the theme.

How do I fix this? Is there any CSS trick I can use to force the pre element from picking up the background color of the enclosing code element?

1 Like
2

I don’t use pygments or Hugo’s “server side code styling.” I prefer prism.js or highlight.js and then you can keep your codeblocks in your markdown as just the typical triple back tics so the markdown will work with any static site generator rather than wrapped I Hugo-specific syntax…

Just a thought.

3

I personally find pygments more acceptable because it supports way more syntaxes than say highlightjs, like the ones i use e.g. python repl, bash console session, etc. That is why server side highlighting is important for me.

4

Ah, I see. Highlight and prism have a pretty extensive list of languages; not sure if you’ve checked both rec

http://prismjs.com/download.html
https://highlightjs.org/download/

5

Thanks for the links!

I had checked highlightjs before, and I checked prismjs now. I really like the deployment design of the latter - you mention a class of languages you want, and it automatically bundles them together. Unlike highlightjs, where every time you need to add/remove a language outside the standard list, you need to get another bundle composed from the website.

But the syntax support of pygments is way more comprehensive than either, at least the ones I am interested in.

In any case, I found a solution to my problem using CSS itself.

For any bootstrap theme which hopes to use pygments supported server side highlighting, they need to add this to their main.css or whatever css file they are putting their customization in.

.highlight pre {
  background-color: inherit;
  color: #f8f8f2;
}

The color value here, unfortunately has to be hard coded as per the pygments style you are using. I picked up the corresponding value from the monokai source.

In particular, this is the value to use:

# No corresponding class for the following:
Text:                      "#f8f8f2", # class:  ''

This happens to be the default face color for the style, and hugo seems to skip adding this styling while rendering the source.

1 Like