Skip to content

Instantly share code, notes, and snippets.

@scmx
Last active August 28, 2023 19:21
  • Star 58 You must be signed in to star a gist
  • Fork 7 You must be signed in to fork a gist
Star You must be signed in to star a gist
Embed
What would you like to do?
Using <details> <summary> expandable content on GitHub with Markdown #details #summary #markdown #gfm #html

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

@DeltaPavonis
Copy link

DeltaPavonis commented Jan 27, 2023

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:

Some bold text code.go link
```go
func main() {}
```

Code for the above dropdown was

<details><summary><s>Some</s> <b>bold</b> <i>text</i> <code>code.go</code> <a href="//example.com">link</a></summary>

    ```go
    func main() {}
    ```
</details>

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.

@Volume999
Copy link

Is there a way to make the summary bigger font? I tried to wrap the entire details, but it sized everything inside, while I would like only the "header"

@wasREDACTED
Copy link

wasREDACTED commented Apr 28, 2023

@Volume999, it's shown above1, use at least 1 empty line after the <summary> and markdown can be used for the summary.

Summary (h1)

content is regular size
<details><summary>

# Summary (h1)
</summary>
content
</details>

Summary (h2)

content is regular size
<details><summary>

## Summary (h2)
</summary>
content
</details>

Summary (h3)

content is a regular size
<details><summary>

### Summary (h3)
</summary>
content
</details>

Footnotes

  1. https://gist.github.com/scmx/eca72d44afee0113ceb0349dd54a84a2?permalink_comment_id=4195815#gistcomment-4195815

@dcposch
Copy link

dcposch commented Jun 13, 2023

You can also use the <strong> tag directly inside summary:

summary hidden

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