I have tried the various suggestions I have read in this forum and done my due diligence with toying and searching online for an answer. So far nothing is working and the colors being used for highlighting syntax aren’t able to be changed, including what is being defined in my site’s style.css. Any tips would be very much appreciated.
You can view my repo here.
Hi @essentialenemy,
Here’s a tip from my observation – it might vary depending on the environment.
First, add the following lines to the config.toml.
pygmentsCodeFences = true
pygmentsUseClasses = true
This will let the custom style to take effect on both code fences and highlight shortcodes. If you don’t set pygmentsUseClasses = true, the styles will default to the predefined Chroma style.
Generate CSS for one of predefined Chroma styles, preferably the one that’s similar to your liking.
https://gohugo.io/content-management/syntax-highlighting/#generate-syntax-highlighter-css
Check the selectors in the generated CSS file, and you’ll find out that they are .chroma .* instead of .highlight .* that you have in your _syntax.scss file. Note that the range of selectors vary depending on the Chroma style.
Tweak the styles of .chroma .* as per your preference and import the CSS file.
When using Hugo Pipes as in your project, adding the customized .chroma .* styles to SCSS would work, I suppose.
Hope this helps.
I will definitely give this a try and check back in. It is more than odd that if pygments has been deprecated that the two lines you suggest I add to config.toml reference pigments but at this point nothing else has worked. Thank you kindly for the suggestion, changing the language from .highlight to .chroma is not something that I had tried yet.
The tips from @jkboxomine are correct. I just want to add that while the settings pygmentsCodeFences etc. works, I reorganized all of this in Hugo 0.60:
You can see the default config here:
In short: