Skip to content

Instantly share code, notes, and snippets.

@scmx

scmx/using-details-summary-github.md

Last active May 1, 2026 21:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save scmx/eca72d44afee0113ceb0349dd54a84a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save scmx/eca72d44afee0113ceb0349dd54a84a2 to your computer and use it in GitHub Desktop.
Download ZIP
Using <details> <summary> expandable content on GitHub with Markdown #details #summary #markdown #gfm #html
Raw
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

@Poikilos
Copy link
Copy Markdown

Poikilos commented Mar 25, 2026 •
edited
Loading

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment