It looks like the lines of HTML generated for code blocks (from triple backtick markdown) are getting truncated when Hugo generates the HTML for them. It’s like it gets to a particular line length, then it adds a newline to break to a new line, in the middle of a PRE. This is adding inappropriate line breaks within these code blocks.
You can see one example in the screenshot below (we have many instances of this happening). If you look at the HTML generated by Hugo (at the bottom of the screenshot), you can see that it’s breaking the lines of generated HTML in the middle of PRE content.
For the longest time I assumed this was some kind of CSS bug on my side. But it only showed up in the HTML generated by the hugo command; it never happens with hugo server. That was my clue to look at the generated HTML, where I see those extra line breaks being inserted by Hugo.
The guidelines for submitting a bug suggest posting here first, so I’m curious to hear if others think this is a bug in Hugo itself, or if this is something I can work around on my end somehow. Thanks!
Forgot to mention that we’re on hugo v0.105.0+extended darwin/amd64 BuildDate=unknown, using our own theme. The only renderer that we’re overriding is the link renderer, so that external links open in a new tab.
Are you doing something different with the CSS when hugo.IsProduction is true? For example, minifying the CSS, passing it through PostCSS, or PostProcessing?
If I’m guessing right, you’re probably using purgecss to remove unused CSS. There’s an open bug about Hugo not collecting all the CSS classes inside the code blocks.
This is what I have in one of my projects to make sure purgecss includes all the CSS needed:
Thank you for the feedback, that helped me dig deeper and find what appears to be the culprit.
Looking at this again today, this does not look like a bug in Hugo. When I just run the hugo command by itself, the problem doesn’t present. But the build script is calling into something called html-minifier (I’m inheriting this setup from someone else so I’m working all this out). When I leave out the html-minifier part of the build step, the problem goes away.
So I’ll be digging deeper with html-minifier. Thanks again!
Please disable html-minifier and run hugo --minify to test Hugo’s built-in minifier (github.com/tdewolff/minify). I do not expect any problems, but it would be good to confirm.