Syntax highlighting style selection not working with toha theme

[JamesH]

I hoping to be able to use the toha theme for my website, but syntax highlighting with styles from the gallery is not working correctly. The monokai theme looks fine but other styles are definitely not correct.

Since the author is too busy to fix all of the issues with this popular theme, is there a way I can track down the problem .css myself and try to fix it? Or else how can I use the markup.highlight.noClasses = false setting and use my own generated .css?

Here is the relevant part of my config.yaml for the site:

markup:
  highlight:
    style: github
    noClasses: true

Here is what the syntax highlighting looks like with the github style:

[jmooring]

Instead of using Hugo’s built-in syntax highlighter (chroma), the toha theme performs syntax highlighting via highlight.js. That means that the markup.highlight settings in your site configuration are irrelevant.

Either use a different theme, or override the following templates by copying them to your project’s layout directory (retain the relative path):

• https://github.com/hugo-toha/toha/blob/main/layouts/_default/single.html.
• https://github.com/hugo-toha/toha/blob/main/layouts/notes/list.html
• https://github.com/hugo-toha/toha/blob/main/layouts/notes/single.html

In each of the files above, remove the lines referring to highlight.js (there are two in each file: one stylesheet, and one script).

[JamesH]

For the posts, it seems that the first one is relevant: layouts/_default/single.html.

However, as soon as I turn off the highlighting, extra space is added at the start messing up the code block. This is especially visible with line numbering on:

There should not be an empty line at the top of the code.

Any idea why this is happening?

[jmooring]

@JamesH

Any idea why this is happening?

Not without seeing your code.

Please post a link to the public repository for your project.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

[JamesH]

OK, got it.

The is the repo with a minimal example.

Here is the deployed example (for now).

I noticed this is dependent on the Hugo version. Before I set the version in netlify.toml to match my local hugo, it was “less bad” but still not correctly rendered.

[jmooring]

Here’s the problem:
https://github.com/hugo-toha/toha/blob/main/static/css/layouts/main.css#L236-L238

pre > code {
  padding: 10px !important;
}

[JamesH]

Yes, that fixed it. The fixed webpage is has been pushed to the repo.

I’m not a web developer (obviously) but I was surprised that this seemed to make no difference in the developer tools display of the html.