Vertical size limit for code blocks

[smarie]

Contribution guidelines

• I've read the contribution guidelines and wholeheartedly agree

I want to suggest an idea and checked that ...

• ... to my best knowledge, my idea wouldn't break something for other users
• ... the documentation does not mention anything about my idea
• ... there are no open or closed issues that are related to my idea

Description

It would be very useful to have an optional max-nb-lines property on code blocks allowing to limit the number of lines actually displayed, letting users scroll down if they need to see the rest.

Use Cases

In mkdocs-gallery I try to reproduce what is provided in sphinx-gallery but using mkdocs instead of sphinx. For this I am leveraging as much as possible mkdocs-material so that example scripts are transformed into markdown source documents with as little as possible raw html (separation of concerns).

There is one feature of sphinx-gallery for which it does not seem possible with mkdocs-material code blocks as of today: the ability to limit displayed line numbers. This capability is demonstrated in

• this example in sphinx gallery: you see that there are 20 lines displayed entirely and the rest can be see by scrolling down
• this example in mkdocs-gallery : you see that currently I cannot provide the equivalent

Is there an obvious trick that I would have missed ? In which case I would be happy to propose a documentation PR so that other users find it easily too. Otherwise, could this be a feature for a future version ? Maybe obtained by setting an max-nb-lines attribute on the code block.

For reference, the associated issue in mkdocs-gallery is smarie/mkdocs-gallery#7

Note: issue #2171 seems related but only talks about width if I am not mistaken.

Screenshots / Mockups

[lampensau]

While there is no configuration option that allows you to limit the height, you could achieve a fixed height with a bit of custom css:

# mkdocs.yml
extra_css: custom-styles.css

/* custom-styles.css */
.md-typeset pre > code {
    max-height: 5rem;
}

If you need more specifity for your css selector you could add a custom class to your code block(s) using the extension attr_list.

[squidfunk]

Thanks @lampensau - great customization! It’s trivial to add with CSS.

Edit: my explanation might be a bit brief (was answering on mobile), so here's an attempt to explain my thinking: we could, in theory, add a data-* attribute to the code block which could then be used to set a dynamic height, but the problem is that this will mean we need JavaScript to do so, as no browser supports attr() outside of the content property. The CSS by @lampensau shows how to achieve it with plain CSS, and if you want, you can even use CSS variables and set them with the Attribute Lists extensions. Maybe something similar to the following (untested):

``` { .py style="--md-codeblock-height: 200px" }
...
```

.md-typeset pre > code {
    max-height: var(--md-codeblock-height, 5rem); /* 5rem will be used as a fallback value */
}

[smarie]

Nice, thanks to you both ! I'll use this solution

[binooetomo]

Hi.
I tried to use @squidfunk solution, but it didn't work

here is my mkdocs.yaml

...

theme:
  name: material
  features:
    - content.code.annotate
  palette:
    # Palette toggle for light mode
    - scheme: default
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Palette toggle for dark mode
    - scheme: slate
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

extra_css:
  - mkdocs-custom-styles.css

markdown_extensions:
  - def_list
  - admonition
  - pymdownx.details
  - pymdownx.highlight:
      anchor_linenums: true
  - pymdownx.inlinehilite
  - pymdownx.snippets
  - pymdownx.superfences

Here is snip off my code block```

...
 more then 5000 line
 

Its still show 5000 more lines.

I tried to remove linenums, title, and hl_lines and still didn't work

Sincerely
-bino-