Add expandable/collapsible code (like in Redoc)

[dextertd]

Feature request.

https://github.com/Redocly/redoc

I'm surprised this hasn't been brought up before (unless I'm searching incorrectly). Redoc offers a fantastic feature where you can expand and collapse code blocks. Additionally, it is possible to expand (for example) dicts in JSON code blocks, which is pretty neat too.

I don't know if this is something that can easily be implemented or is just fundamentally incompatible with slate, but it would be a great addition! Again, please refer me to another issue if this has already been discussed.

Cheers!

[mick-net]

I was looking for the same thing. I found the following, but it's only MarkDown related:

https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab
https://stackoverflow.com/questions/52214187/how-can-i-fold-content-in-github-markdown

Hope that helps

Edit: I see now that this doens't directly work... since it only shows up in the Slate 'text' column instead of the 'code' column

[mick-net]

I tried a few times. The best I could get is the code bellow.
It results in a expandable/collapsible line, but the code is not formatted anymore as code.
According to stackoverflow there needs to be an white line after the first

to make to code work. It indeed makes to code work, but then it doesn't show up in the 'code' column anymore.

Maybe a slate/ Markdown expert could help us?

`

A collapsible section containing code

stuff with *mark* **down**

```json { 'status' : 'OK', 'message' : 'Test', } ```

`

[kuroshhashemi]

Any updates on this? Seems pretty common that code block would be long enough to drag apart blocks of text. One not-great solution is to set a max-height on the code block, but without knowing how tall the text next to it is, you could end up with the opposite problem - awkward shorter block and scroll bar on the right side than the text on the left side.

[dextertd]

I came up with a bit of a compromise solution that I'll share below. It still shows the code block in full but it means that smaller header sizes don't force the code block to conform to their parameters so that it can instead show up alongside them. So you still might have large gaps but there should be fewer than before, or at least the info needed by the user is better distributed.

Before screenshot:

After screenshot:

In your .md files

<p class="fake_header">HTTP Request</p>

In your screen.css.scss

// fake header to address issue where code pushes HTTP Req down the page
.fake_header {
  @extend %header-font;
  font-size: 16px;
  margin-top: 2em !important;
  margin-bottom: 1em;
  padding-top: 1.2em;
  padding-bottom: 1.2em;
  background-image: linear-gradient(to bottom, rgba(#fff, 0.2), rgba(#fff, 0));
}

That particular CSS class is identical to an h3 header. It does not conform to the TOC, ie it won't show up there.

Hope this helps.

[rajeevkallur]

Worked for me!!