Rising scroll threshold in code blocks (or complete unfolding)

Contribute UX

AI-generated summary

The discussion revolves around controlling the scroll threshold in Markdown code blocks. firegurafiku wants to display code inline until it reaches a certain length, such as 200 lines, and is looking for a way to adjust or completely remove the automatic vertical scrollbar.

firegurafiku tried using CSS to achieve this but encountered issues. cpradio suggested adjusting the max-height attribute of pre code in the Admin > Customize > CSS/HTML > CSS area.

cpradio’s solution worked for firegurafiku, who successfully implemented it. Alternatively, simonmic suggested setting max-height to none for both pre code and pre elements, which also achieved the desired result.

1

When you insert a Markdown code block ( ```) into your message, it receives automatic vertical scrollbar if its content is long enough. But I don’t mind having long listings in messages and want to display code inline until it reaches, say, 200 lines long. Is there a way to control this threshold?

Alternatively, if no such threshold can be set, is it possible to completely unroll the listing regardless its length? I tried setting display: table to code tag, it worked, but block width got shrink to content width too. So I tried setting width: 100%, but that resulted in having horizontal scrollbar emerged. I’m not that skilled in CSS, could anybody please help me?

2

You want to adjust and/or remove the max-height attribute of pre code

So in your Admin > Customize > CSS/HTML > CSS area, put

pre code {
  max-height: 800px;
}

You can change 800px to any number really, it simply implies when the code block reaches that amount of space, start showing the scrollbar.

5 Mi Piace
3

Thanks! That works like a charm and is exactly that I wanted.

4

Oppure - a colpo sicuro, ma finora funziona:

pre code {max-height:none;}
pre      {max-height:none;}

Il mio pre esterno ha un’altezza massima di 2000px, quindi era necessario anche un aggiustamento.