Folded / minimized code blocks

[heapcrash]

Preface: I searched Discourse, but the existing threads all had dead links. (e.g. Using minimo theme)

I would like to be able to show the first ~N lines of a given source code snippet. If the code block is longer than that, I would like the remainder to be folded, to improve linear readability of articles which contain e.g. a single large code block and then discuss it.

Are there any ready-made ways to do this? I’m using the beautifulhugo theme, and it has some useful support for a {{< details >}} block that is expandable, but it hides ALL of the content until expanded – I’d like something that shows the first N lines with some kind of fade-out perhaps.

[davidsneighbour]

Google That’s a HTML/CSS question and that result here looks good to me:

How to display only the first few lines of a div (clamping)?

You would then add a button with an onclick event that removes the “clamping” from the div. Add a little transitioning via CSS and all is well.

Put the whole staff in your own shortcode and you are good to go.

[heapcrash]

I’m not a web dev (I do low-level systems programming) so I was at a loss even for the right words to begin searching for. I’ll check out some of the links / search terms you posted!