Collapseable Section

[jmrussell]

Thank you for the great program. I have been using it at work a lot to link many reports of analysis I have done ( in addition to my own notes) , but one feature I am missing greatly is the ability to produce sections of markdown that can be collapsed and expanded by the click of a button. I am not a great programmer and couldn't figure out a way to do this with the markdown syntax neuron appears to use. Is this possible?

[srid]

@jmrussell

Could you give a specific example of where you would need collapsible / expandable sections?

One approach is to separate out these sections into individual Markdown notes, and then from the main note link to them using wiki-links. It is not the same thing, from user interaction point of view, because to "expand" you would be clicking the link and that reloads a whole new page (masking the main note), and to "collapse" you would be going back (which might put you in different context visually).

You can also try the raw HTML tag <details> but that might be limited in some ways: https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab

That said, an example and the context which made you want this feature would be more illuminative in regards to considering the best approach here.

[srid]

FWIW, there was some discussion about adding this to Markdown syntax proper (as an extension), though nothing concrete came out of it (yet): https://talk.commonmark.org/t/html-details-tag/759

Would be interesting if John MacFarlane gets convinced to add this as an extension to https://github.com/jgm/commonmark-hs (neuron uses this library; so it would be a straightforward change to support it).

[jmrussell]

Apologies for putting this in the wrong spot initially and thank you for the quick response.

In terms of a specific example, the one that pops into my head is storing code blocks that are useful for me to have available, but not necessarily conducive to looking nice when I share notes with people. I will often share a note that describes an analysis problem and the solution for non-technical staff, but it's hard for them to read when there is a giant code block they don't understand. It's also nice in my private notes to have a description of something, a code block, and then more notes for a more narrative based explanation of something I've coded.

Before using neuron I was just manually linking together Rmarkdown reports that way (it can be overkill for sharing a quick note, though) and I will continue using for those for longer analysis but the wiki-links and easy to manage system that neuron + neuron.nvim provides is so slick I'd love to expand it to all possible use cases outside of the longer reports where multiple inline images/interactive plots are necessary.

I had also looked through the commonmark-hs docs and didn't see any method detailing how to do something like this, so it's nice to know it just doesn't exist rather than me not seeing it lol.

I originally tried something like

but I was getting a lot of errors about certain links not existing etc (fwiw, I am using neuron.nvim) so I just assumed it didn't work. If you think it should be working I can try again tomorrow and see if I can't get it up and running.

I know it's not exactly the intension of neuron, but it has been really nice managing my workflow this way.

[jmrussell]

OK! I figured out if I include the code block and {=html} I can use <details> and it make it work (I think). It's not super convenient but it will totally do what I want. I guess the way it might be limited is making formatting anything inside the collapseable section difficult

[srid]

Another option to try is fenced_divs + a bit of JavaScript.

For example, the following Markdown,

:::{.collapsible}
Some text or [[WikiLink]] or *whatever* markdown ...
:::

will wrap that markdown in a <div class="collapsible"> tag. Then you can add some JavaScript to head.html that will look at all div's with that class and automatically make them collapesable.

Since neuron uses fomantic UI, you might be able to do something like that leveraging https://fomantic-ui.com/modules/accordion.html