How to use
<summary> expandable content on GitHub with Markdown
Firstly, what is
The HTML Details Element (
<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the
Toggle me!Peek a boo!
<details><summary>Toggle me!</summary>Peek a boo!</details>
Is there a special GFM (GitHub Flavoured Markdown) syntax for using
<summary> on GitHub?
Answer: No, but you don't need it, since GFM allows embedding HTML inside Markdown.
#### Example <details open> <summary>Shopping list</summary> * Vegetables * Fruits * Fish </details>
Remember that blank lines are needed before/after a section of markdown that is within an html tag, otherwise the markdown won't work
More about details/summary
Browser support is good https://caniuse.com/#feat=details It falls back to being expanded all the time. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
Similar gist https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d
Actually, I found a (rather heavy-handed) workaround to get MD-like formatting in
<summary>, from a comment in the other gist linked in the post (link)
Just use HTML tags instead of Markdown to get the formatting you want:
Code for the above dropdown was
Hope there's a simpler way, whether code-based or extension-based... I haven't found any extensions on VSCode that allow for the same.