[Solved] Using codefences does not obey pygmentsUseClasses setting

Hi all, this is my first post here and I am a noob at Hugo so please be patient.

I raised an issue on GitHub about this but @bep asked me to bring it over here.

In my site config.toml I have:

# Code Highlighting (uses Chroma but shares old config names for compatibility)
pygmentsCodefences = true
pygmentsUseClasses = true

And when I use the {{< highlight >}} tag all is well, things are highlighted as expected.

However, when using codefenses, the block is only wrapped with <pre><code> e.g.

    <code class="language-go-html-template">
        {{ % code file="/static/some-script.js" language="js" %}}

And this does NOT enable the highlight classes.

Can anyone point me in the right direction for fixing this because it is a massive pain as I am trying to migrate from a Jekyll site and a WordPress site and having to go through all of the posts and pages fixing them to use the highlight tag won’t be pretty. Nor will having to always type in the highlight tag for future posts.

Here is an example online from my test site:

The problem is illustrated at the end of the page.

Thanks in anticipation - JK.

Well. OK, I’ve solved it myself - I started debugging why Disquss wasn’t working either.

I ended up trying moving the entries in config.toml further up the page.

Guess what, that worked!!! But I’ve no idea why.

Here is the relevant section of my config

# Code Highlighting (uses Chroma but shares old config names for compatibility)
pygmentsCodefences = true
pygmentsUseClasses = true 
pygmentsCodefencesGuessSyntax = true
#pygmentsStyle = "monokai"

# Disqus shortcode
# Disable comments for any individual post by adding "comments: false" in its frontmatter
disqusShortname = "muchadoaboutit"

  # Configures post URLs
  posts = "/:year/:month/:slug"
  #pages = "/:slug"
  kbs = "/kb/:slug"
  #categories = "/topics/:slug"

  # Site author(s)
  name = "Julian Knight"
  homepage = "https://it.knightnet.org.uk"

When disquss and codefenses were not working, the variables were BELOW the author section. Now they are above, it works. So at least one of those 2 sections causes the issue. A quick test shows that it won’t work if I put it after the permalinks section either.

Does that mean that you CANNOT have stand-alone variables defined AFTER a section? Because, if it does, I don’t remember seeing that in the documentation?

Hoping for clarity here.

Regards, JK.

PS: Even with quirks like this, Hugo is still vastly easier to work with than Jekyll :wink:

It’s not a quirk! You just need to understand how TOML works (TOML Tables) :slight_smile:


Urm, it’s a quirk if it isn’t clear! Well, OK maybe not. I’m used to YAML which doesn’t have this issue. I only used config.toml because that was what is in the docs.

I’ve now added a reminder comment in my config.toml and in my theme.toml files so this doesn’t happen again.

Thanks for the info though @kaushalmodi, much appreciated.

It’s not an issue… It’s just how you cannot write C syntax in Python code (directly, no wrappers) and expect it to compile… YAML and TOML are different syntax for configs… If you comfortable with YAML, write your config in YAML.

@regis has recently put in a lot of effort to show each YAML/TOML/JSON site config or front-matter snippet in all 3 formats in the Hugo doc site (example), or you may choose to use something like https://toolkit.site/format.html to convert from TOML to YAML or vice-versa to understand how they translate.

1 Like

To be clear, I’m not criticising the choices - but it IS an issue if it isn’t obvious.

I should point out that I come from an information management background, I’m not a developer.

Anyway, this is not the forum for discussion about IM, data schema and UI design choices. Thanks for the link to the converter, very useful.

TOML is defined by a standard, as is YAML as is JSON. Hugo is a consumer of the contents of those files, not a definer of the standard.

Personally I prefer YAML, the markup seems clearer to me than TOML.

1 Like