Add new tag to have a collapsed code-block with ability to expand

[mmcky]

Is your feature request related to a problem? Please describe.

For long code-block and code-cell it would be nice to have a collapsed feature with a line specification. So for example it would load with only 20 lines showing and an ability to expand the block.

https://myst-nb.readthedocs.io/en/latest/use/hiding.html#hiding-cell-contents

Describe the solution you'd like

Perhaps the tag could be collapse-n where n is the number of lines? (i.e. collapse-20 would have a cell with 20 lines (or less if content is less) showing.

Describe alternatives you've considered

Not really any

Additional context

Would support displaying code cells like the one in this section:

https://python.quantecon.org/linear_algebra.html#Vector-Operations Add any other context or screenshots about the feature request here.

[choldgraf]

ah cool idea - is this something that should be done at the myst-nb level, or via something like a separate extension or at the theme level? I can see arguments for any of them so not super opinionated myself

[mmcky]

thanks @choldgraf that is a good point.

I guess it will certainly need theme support of some kind?

If we have the -n for specifying the length of the box would this be something the theme can support (or would this need to be built by sphinx)?

[choldgraf]

well I think that we could bundle the CSS for this with myst-nb itself, probably just something like

div.cell.collapse-20 {
   max-height: 20em;
   overflow-y: scroll;
}

so that would propagate to other themes etc (though we'd need to make sure that we don't clobber other theme CSS I suppose)

[mmcky]

oh cool -- and using an internal template we could make the 20 some value specified by the tag. thanks.

[mmcky]

Do you think this should be in myst_nb or a general enough request to have it in a separate sphinx extension?

[choldgraf]

maybe we can start out with MyST-NB and then fork it out if it seems useful enough. WDYT?

[AakashGfude]

@mmcky @choldgraf to me it feels like it should be somewhere else apart from myst-nb 😬 like we have for other UI related stuffs (sphinx-tabs, sphinx-panels, togglebutton etc). Don't know the best place for it yet though, but the most generic might be sphinx-book-theme?

[AakashGfude]

div.cell.collapse-20 {
   max-height: 20em;
   overflow-y: scroll;
}

We can probably specify the number of lines to show in a config variable and use css like this to configure max-height?

[choldgraf]

It does seem like a "theme" thing rather than a myst-nb thing...I'd be +1 implementing it there, it is simple enough for other themes to implement themselves I suppose

[AakashGfude]

hmm. let me try out this one this week and see how it looks in the theme.

[mmcky]

@AakashGfude how did this trial go? Perhaps we can work on this next week.

[mmcky]

@AakashGfude I agree with you. I think this is more a theme support item. Other collapse style mechanisms such as for the left hand toc are implemented in the theme rather than here (as a plugin). Perhaps the best way forward for this is:

1. Implement in quantecon-book-theme as a proof of concept
2. upstream the change to either sphinx-book-theme or pydata-sphinx-theme