Highlight (Code fences) extreme width issue

support
1

Not sure if this is working as expected but it is certainly causing some issues.

I have some JSON data that has very long single lines that I want to include on a page (for people to be able to copy).

Normally, I would expect a highlighted section to respect the width container but for some reason, the highlight/codefence shortcode is not. Instead it seems to be adopting the maximum width of the code.

You can see the issue at the bottom of this page: https://it.knightnet.org.uk/kb/nr-qa/extract-html-table/

This could well be due to some crazyness in my CSS but I’ve not had similar issues elsewhere.

I can see that the wrapping div class=highlight is getting a max-width of 100% which should work and if I manually set that to 90em, it does work. But left to 100%, it just expands.

I’m using the Bulma CSS framework but I’ve tried removing that and it makes no difference. I’ve also tried removing my own stylesheet and that also makes no difference.

Theme code is here: https://github.com/TotallyInformation/hugo-theme-twenty-sixteen
Sorry, can’t share the site source. I’m trying to find time to create a test site.

2

I like using overflow-x (Example). See if that helps you.

3

Thanks, very helpful. I’ll give that a go.

It does leave me a bit concerned though. I’d not expected to have to roll my own CSS quite so much when Hugo generates a whole bunch already for highlighting. This seems to be a failure - though not really of Hugo I suppose but rather the highlight tool. The more I have to hand-crank now, the more likely it is to break on some future update.

I’m not a full-time dev so I really don’t want to spend loads of time tweaking CSS if I can help it.

Thanks again.
JK.