Hugo injects <span...> into code blocks in markdown slides

[hofbi]

Describe the bug

Rendering of code blocks does no longer work in markdown slides when specifying the language and hosting on GitHub pages.

I can observe this issue already in the example slides which are provided by you, so I expect the error somehow related to how the slides are generated or hosted. I host them on GH pages while the demo is on netlify.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://hofbi.github.io/slides/example/ slide 4 (python) or slide 8 (markdown)
2. See how code blocks are rendered.

The code block without a language specified on slide 6 works as expected

Expected behavior

This shows how it should actually look like: https://academic-demo.netlify.app/slides/example/

Technical details:

• Link to your GitHub project: https://github.com/hofbi/hofbi.github.io
• Wowchemy Version (from your go.mod): v5.0.0-20220423180919-17d5d3f0ca43
• Hugo Version (run hugo version): 95.0
• Browser/OS: Firefox and Chrome on Ubuntu 20.04
• Wowchemy Template (e.g. Academic): Academic

If applicable, add screenshots to help explain the issue.

[gcushen]

Recently, we enabled Hugo's syntax highlighter feature by default in order to automatically detect Mermaid diagram code blocks, but continue to use HighlightJS for the actual highlighting. It appears this change has resulted in an issue affecting RevealJS.

Reproduction of issue on demo: https://markdown-slides.netlify.app/slides/example/

See https://github.com/wowchemy/wowchemy-hugo-themes/blob/814fa1db6986fe8e7f9caaf8fce2aa770ad2799a/wowchemy/config.yaml#L11

Under markup in your config.yaml you might wish to try disabling Hugo's syntax highlighter (although it may not fully resolve the issue, and will mean that any Mermaid diagrams won't be detected/rendered):

markup:
  merge: _deep
  highlight:
    codeFences: false

[gcushen]

It might be worth raising it on the Hugo Issues as Hugo probably shouldn't be wrapping code snippets in <span class... when we're only attempting to use Hugo to detect Mermaid diagram code blocks and not for actual syntax highlighting (Hugo is configured with noHl: true).

[hofbi]

Thanks for the fast feedback. Disabling the codeFences resolved the issue, but I did not check if it causes other issues.

Creating an issue on Hugo is a good idea. I will do it right away and mention this issue. Just to be sure that I understood the root cause correctly, the <span> insertion is something new right?

[gcushen]

Disabling the codeFences resolved the issue, but I did not check if it causes other issues.

This workaround may work for you, but if any users are using Mermaid diagrams, they will no longer be detected and rendered when disabling Hugo's highlighter feature.

Just to be sure that I understood the root cause correctly, the insertion is something new right?

Yes, the <span> instances are being inserted by Hugo which we would assume shouldn't happen when Hugo is configured with noHl: true. It's either a Hugo bug with the noHl option or there's an opportunity for Hugo team to allow the Hugo code block parser to be used to detect Mermaid diagram code blocks without highlighting any code or injecting any <span>.

[gcushen]

Closing as the upstream issue is now tracked at https://github.com/gohugoio/hugo/issues/9885