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
LaTeX math blocks in details are buggy and only seem to work if there is no previous math on the page. For example:
It works once:
Math
But it doesn't work twice:
Math
$$
1 + 1 = 2
$$
Top-level math blocks still works:
It doesn't seem to be a problem for other tags like
<div>
, just<details>
.The only workaround I've found is to use inline math, which always works in details:
Inline math
Inline math
Is there any workaround for the math blocks?