Using <details> <summary> expandable content on GitHub with Markdown #details #summary #markdown #gfm #html

using-details-summary-github.md

How to use <details> <summary> expandable content on GitHub with Markdown

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.

Example

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.

Example

Shopping list

• Vegetables
• Fruits
• Fish

Code

#### 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

Ok, nevermind, I found a workaround for the math blocks. For some reason it works as long the whole block is put on one line with no spaces immediately after the first $$ in the math block. In my own gist, I can also put newlines in the math block as long as there are no spaces or newlines immediately after the first $$, but in this comment it seems it only works if it is entirely on one line.

<details>
<summary>Math</summary>

$$1 + 1 = 2$$
</details>

Math

$$1 + 1 = 2$$

Math

$$1 + 1 =2$$

Edit (2024-09-08): Looks like they broke the workaround, now math blocks get converted into inline math when you do this :(
Thankfully, fenced math blocks work:

Fenced math

$$1 + 1 = 2$$

Fenced math

$$1 + 1 = 2$$

How to prevent breaking when .md file is hosted on GitHub pages?

Anyone have a workaround for alert boxes in details sections?

Markdown:

> [!WARNING]
> Warning 1

<details>
<summary><b>More</b></summary>

> [!WARNING]
> Warning 2

</details>

Result:

Warning

Warning 1

More

[!WARNING]
Warning 2

For code, somehow none of the previous solutions worked, at least as of now.
I did <details><summary></summary>...</details> correctly, and inside I tried:

1. <pre></pre> used bash comments as markdown headings (if there was ever a space after #)
2. <pre><code></code></pre> (same problem)
3. triple backticks: (same problem)
4. triple backticks + indented 4 spaces: mostly worked (rendered code as code), except showed the backticks.
5. simply indented 4 spaces: mostly worked, except first line was excluded from the code block.

Given 5 almost worked, I recalled from somewhere (markdown and/or StackOverflow and/or BB code), a blank line was required, so this worked:

<details>
<summary>checker script</summary>

    #!/bin/bash
    echo Hello
    # This is a comment not a heading
</details>

Worked for me today on an issue, but for posterity here is a test:

checker script

#!/bin/bash
echo Hello
# This is a comment not a heading