I am using hugo v0.49.2/extended linux/amd64 with AllinOne theme.
I have set
pygmentsUseClasses = true in config.toml
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
c1 etc. inserted in the said code block.
Am I missing something?
You have to generate the classes!
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!
You may have to set
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
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.
That’s up to you
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)
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!
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
pygmentsStyle = "pygments"
”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.
Wow! Didn’t know that. Thanks for the info!
Now, I see no reason why one would want to use
pygmentsUseClasses to apply the Chroma stylesheet.
Didn’t know either. Thanks a lot.