Firstly, what is <details>
<summary>
?
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<summary>
element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details.
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 <details>
<summary>
on GitHub?
Answer: No, but you don't need it, since GFM allows embedding HTML inside Markdown.
Shopping list
- Vegetables
- Fruits
- Fish
#### 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
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
For nested you need to use blockquote to get the indent:
https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab?permalink_comment_id=4319884#gistcomment-4319884
Hello
You only need one blank line above the markdown.
I'm trying to find a tool that converts nested lists in markdown to HTML details and blockquotes.