Collapsible panel in markdown

Basement
1

Hi all,

I was searching for a way to implement a collapsible panel (folding) in Obsidian with any section of the text (currently Obsidian supports folding - if enabled - for lists and headings). To my surprise, by default, Obsidian supports the <details> and <summary> markdown syntax.

For example, if you define

<details>
        <summary>Collapsible header...</summary>
        
        ## Header 2
        > This is actual content in markdown

</details>

Results:

Collapsible header... 
    ## Header 2
    > This is actual content in markdown

This translates to a collapsible panel (by default collapse), and when you click on the link “Collapsible header”, it will expand in the preview mode with the actual content.

However, I found that the markdown content within the details is not rendered properly, i.e. it renders verbatim rather than translating the markdown.

Am I missing something? Or this is not fully supported by Obsidian yet?

Thanks!

2

Pardon my ignorance above :sweat_smile:. Just realised that <details> and <summary> are actually HTML5 tags, which undoubtedly can be rendered in markdown preview.

The challenge for me is to figure out how to render the content within markdown.

3

That’s correct, markdown isn’t rendered inside HTML with a few exceptions (font html tags I believe).

4

In another Markdown-based note taker I’ve used, the syntax to have renderable Markdown inside a Details is:

<details>
<summary>Cycle Details</summary>
<markdown>
Time  | Action                | ΣHeat 
------|-----------------------|-------
00:00 | Heat to soak          |  2:19 
09:00 | Heat 45s              |  3:04 
</markdown>
</details>

However the <markdown></markdown> tags do not work in Obsidian.

5