Support Hidden or Spoiler Cells

[clsource]

As a way to hide solutions to problems inisde the livebooks used as a teaching tool.
A mechanism to allow hidden/spoiler content that will only show if requested.

Some possible tag

<!-- livebook:{"spoiler":true} -->

[jonatanklosko]

Hey @clsource! You can use the <details> tag in Markdown cells, like this:

<details>
<summary>Solution</summary>

```elixir
# Code
```

</details>

[clsource]

So simple yet so powerful. Thanks!

[clsource]

Ah but the code would not be runnable if is inside the markdown cell.
My solution cannot be tested 😢

[clsource]

As I thought I cannot hide a code cell. It must be all inside the markdown code.

[jonatanklosko]

For solutions specifically, this may be a good thing. This way you could even break it into several "tips" with smaller code snippets that are not necessarily executable. For testing the final behaviour, you can write a test case that they can run :)

[clsource]

Good idea. Thanks 💯

[BrooklinJazz]

I wrote a Hidden Cell library using Kino.JS.Live that you might be interested in using or modifying :) https://github.com/BrooklinJazz/hidden_cell

[BrooklinJazz]

However Hidden Cell hides code so it might not suit your use case.

I don't believe detail blocks allow you to include highlighted code snippets if I remember correctly, so it might be an interesting project to make a "spoiler" cell that will properly display the highlighted code when you click on it 🤔 I could whip up something like this using Kino.JS.Live if folks think it would be useful.

[jonatanklosko]

I don't believe detail blocks allow you to include highlighted code snippets if I remember correctly

Code snippets inside detail blocks should work fine, since it's all markdown, just mixed with an html tag :)

[BrooklinJazz]

I can't believe I didn't know. I had thought it didn't work because of this:

But you just need to have enough space for it to work 🤦

[jonatanklosko]

Yeah, it needs to be a separate paragraph to be parsed as markdown block, otherwise the whole thing is treated as HTML.