Can't change highlight style

support
1 
languageCode = "en-us"
title = "Caleb Cushing's Blog"
theme = "fuji"
enableRobotsTXT = true
enableGitInfo = true
copyright = "Copyright © 2008-2021 Caleb Cushing. This work is licensed under a [Creative Commons Attribution-NonCommercial 4.0 International License](https://creativecommons.org/licenses/by-nc/4.0/)"
googleAnalytics = "UA-21442632-1"
[privacy.googleAnalytics]
respectDoNotTrack = true
[Params]
  Subtitle = "Also known as XenoTerraCide"
	Author = "Caleb Cushing"
	disqusShortname = "xenoterracide"
	bugs = "https://bitbucket.org/xenoterracide/blog/issues"
	license = "https://creativecommons.org/licenses/by-nc/4.0/"
	disable_sri = true
[markup]
  [markup.highlight]
    lineNos = true
    noClasses = false
    codeFences = true
    style = "dracula"
    tabWidth = 2

My whole repo if you want it GitHub - xenoterracide/blog: my blog

only the default style ever seems to work, 0.87.0

2

You set noClasses = false means your syntax higlighting style rely on css file,

You need to generate the css style for this theme:

hugo gen chromastyles --style dracula > dracula.css

put it in your static then include it on your HTML:

<link href="/dracula.css" rel="stylesheet">

Read More:

1 Like
3

Double negation is a really bad idea. The option should be „classes“ so the meaning of the values true and false is immediately obvious.

2 Likes
4

I had tried that, but I didn’t know where to put it, and I didn’t realize that I then had to put it in the HTML (which I don’t have). I tried with noClasses = true but that didn’t use the style I set either, and when I did that the light/dark mode for code didn’t work right, or rather didn’t change.

Yes, I read that document, and have googled all over with no luck.

5

I agree with you, and to be honest, I have no idea what classes even means… what does that term mean here? either way I have syntax highlighting and either way I haven’t been able to get it to change.

6

Noclasses = true (rather classes= false) means that the highlighter uses style attributes directly. Bloated, ugly code.
Noclasses = false (rather classes=true) means that the highlighter uses classnames (smaller, nicer code). On the other hand, you have to generate the CSS with the class definitions as described in the documentation. And of course you have to include it in (one of) your templates. How else would the browser know about it. Unfortunately, the documentation brushes over that requirement.

I don’t that you have “no HTML”, as you said. No HTML means no templates which makes your work with Hugo perhaps a bit painful.

1 Like