Rising scroll threshold in code blocks (or complete unfolding)

Contribute UX

AI 生成的摘要

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 个赞
3

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

4

或者 - 零散的，但到目前为止有效：

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

我的外部 pre 的最大高度为 2000px，因此也需要进行调整。