Expandable code blocks

[hellt]

• I've read the [contribution guidelines][1] and agree with them

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

Implement an expandable code block as demonstrate here

CleanShot.2021-01-02.at.21.31.18.mp4

Use Cases

The width of the main div is ok for text, but quite often the code and/or configuration snippets are wider than the visible area.
To make these code blocks less painful to read the proposal is to make the code blocks expandable on user action.

[squidfunk]

Thanks for suggesting. I think we talked about this in the Gitter channel some time ago. I haven't seen this anywhere, and wonder if it's useful to many users. Let's see if this issue gets some feedback and then decide whether to implement 😊

[ktomk]

If I may chime in, when considering such, I've played around to limit the height of the code blocks (plain css, just having a scroll bar) so perhaps this is also useful to keep in mind for the expansion.

Right now my expand is to copy to clipboard and then use the editor of choice :) - Happy new year btw.

[squidfunk]

Right now my expand is to copy to clipboard and then use the editor of choice :)

This is also my thought. I don't know if it makes much sense to add this feature, because more often than usual you're reading documentation alongside the editor of your choice and copying is dead-simple. Furthermore, this feature will only make sense for anything above the tablet portrait breakpoint (768px), because below that the sidebars are hidden so you wouldn't gain anything in width.

[squidfunk]

Update: I'm currently not considering this feature ready for implementation. Here's why:

1. As the height of code blocks is dynamic and will always show all lines, it will only apply to code blocks that are too wide and which are rendered with a scrollbar. Below 960px viewport width (mobile + tablets in portrait mode), code blocks are already rendered full width. Thus, it will only impact tablet in landscape and desktop breakpoints. It even doesn't make sense to show the expand button below 960px, as it will render the exact same code block.

2. I understand that desktop users make up a huge fraction (at least it's 90% for the official Material for MkDocs documentation). However, if a user reads documentation on a desktop computer, it's not a big problem to copy & paste a code block that runs out of width into the editor of choice.

3. Code blocks show 80 characters on the desktop breakpoint, which is more or less the de-facto standard for printing code. If wider code blocks are desired, the content area width can be adjusted with a few lines of CSS, or the table of contents can be integrated into the navigation. Furthermore, lines can be wrapped with some CSS, if they are too long.

   

That said, there are multiple ways to workaround the problem. For this reason, I'm closing this issue.

[shu307]

It's been a long time but maybe this is what you need.

[hellt]

If anyone has skills to deliver this as a plugin for a monetary compensation, please reach me at roman at dodin dot dev

[hellt]

Here is a good implementation example on dev.to blogging platform

2024-02-15_12-17-39.mp4