How do I set the max-height of the syntax highlighter code block?

[ksten]

Whenever I add a code section to a blog entry using the three backticks style, the rendered html always has max-height set to a really low value using a style attribute directly assigned to the tag:

<div class="highlight">
    <pre tabindex="0" class="chroma" style="max-height: 165px;">
        <code ...

As a result, anything longer than 7 lines gets cut off and you then have to scroll or manually click a maximize button.

How do I configure the syntax highlighter to set the max height to something less constraining (or tell it not to make scrolling sections)?

[davidsneighbour]

That seems like a simple CSS problem Maybe StackOverflow can help in detail.

But I would think this here should do the trick:

.highlight {
max-height: 500px;
}

If that does not work then maybe you override it somewhere in your CSS (the C stands for cascading )

By the way, pre probably never should have a min/max-height.

[ksten]

That won’t work because the pre tag has style="max-height: 165px;", which overrides any styles I set (I’m looking at the rendered code in Firefox’s inspector - I don’t know where this style attribute is coming from, and a grep through everything doesn’t reveal anything suspicious).

[davidsneighbour]

I thought the pre-tags style was your attempt to set a height. This is a typical case of “bad CSS” You could try the following, but I am not 100% sure the important works here:

.highlight {
max-height: 500px;
}
.highlight pre {
max-height: inherit !important;
}

And as I said, this is not really a Hugo issue. That is as far as I can try to help with this, another forum or Stackoverflow might be better suited to get that issue solved.

An idea that comes to mind is to find out, WHY your theme is adding that code. Something is adding that max-height, so removing it should be somehow possible.

[ksten]

Cool, that does undo the damage, but I’m still interested in where this terrible thing is coming from in the first place. I’m guessing it’s in the theme I used, but where would I look in there to find it? A deep grep through the theme gives some instances of max-height: none and max-height:100%, plus one instance of .navbar-nav-scroll{max-height:var(--hbs-scroll-height, 75vh);overflow-y:auto} in the JS, but that seems to be for the navbar, and setting that var doesn’t affect the code block anyway. It would have to be from the JS somewhere I guess, but the only places max-height occurs is as above…

[davidsneighbour]

I would have suspected a renderhook if there would be one for code highlighting. Maybe some form of Javascript is adding this? I would search your whole repo for 165 or pre to see where these come into play. Hugo is definitely not adding this on it’s own. I think. Probably Pretty sure.

[ksten]

Found it!

hugo-theme-bootstrap/src/js/code-block.ts:      this.pre.style.maxHeight = `${this.maxHeight}px`;

Thanks for the help