`pygmentsUseClasses = true` not generating classes

support
1

Hello!

I am using hugo v0.49.2/extended linux/amd64 with AllinOne theme.

I have set pygmentsUseClasses = true in config.toml[0]
But I still can’t see any CSS classes in the generated source code of https://rootkea.gitlab.io/blog/2018-03/style-guide/

I expected CSS classes to get generated for the code block under “Monospace / Preformatted” section. Also, if I choose another theme e.g. kiera I can perfectly see classes like chroma, nb, c1 etc. inserted in the said code block.

Am I missing something?

Thanks!

[0] https://gitlab.com/rootkea/rootkea.gitlab.io/blob/master/config.toml

2

You have to generate the classes!

3

Umm, no. If we have set pygmentsUseClasses = true in config.toml then Hugo generates HTML code embedded with CSS classes.

Then to use those classes we need to generate the stylesheet using hugo gen chromastyles. But since hugo is not generating CSS classes for AllinOne theme (for Kiera it did) there’s no use of generated CSS stylesheet.

Please feel free to correct me if I am mixing up. Hugo beginner here! :slight_smile:

4

You may have to set

pygmentsCodefences
Set to true to enable syntax highlighting in code fences with a language tag in markdown (see below for an example).

…if you use code fences (ie ``` instead of the built-in highlight shortcode)

1 Like
5

Yes! That was it! Thank you!

I am feeling so embarrassed. I went through the docs but somehow missed it.

BTW where should I put the generated stylesheet (hugo gen chromastyles) now? For time being I’m appending it to the main.css from theme static folder.

6

That’s up to you :smiley:

One option for example is to:

  • generate a chroma.css in your static folder
  • and then <link rel="stylesheet" type="text/css" href="chroma.css">

If that works for you, that’s ok. Keep in mind though that modifying the theme directly might not be the best idea if you have it as a submodule. (But that I suppose is off-topic from the original question)

1 Like
7

No, no, no. No off-topic. This is exactly my case. I have theme as a submodule and so I should link stylesheet externally exactly as you mentioned.

Thank you for your help! :slight_smile:

1 Like
8

FYI, you don’t have to generate a CSS file to use the custom Chroma syntax highlighting.

You can just set this line in your config.toml:

pygmentsStyle = "pygments"

Here ”pygments” is just the name of the Chroma style. See the full list of styles and pick the one you like.

I also have this documented in a theme I made.

3 Likes
9

Wow! Didn’t know that. Thanks for the info! :slight_smile:
Now, I see no reason why one would want to use pygmentsUseClasses to apply the Chroma stylesheet.

10

Didn’t know either. Thanks a lot. :+1: