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

support
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