Skip to content

Instantly share code, notes, and snippets.

@scmx
Last active September 28, 2024 18:16
Show Gist options
  • Save scmx/eca72d44afee0113ceb0349dd54a84a2 to your computer and use it in GitHub Desktop.
Save scmx/eca72d44afee0113ceb0349dd54a84a2 to your computer and use it in GitHub Desktop.
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

@Arjun-0000
Copy link

Arjun-0000 commented Jul 6, 2022

hello @matt212 , Find below example to see which one is feasible to you


<details><summary>
    
[Head 1](/folder/f1)
    
</summary>
      <details><summary>head 1.1</summary>
        content 1.1
    </details>
    <details><summary>head 1.2</summary>
        content 1.2
    </details>
</details>
<details><summary><a href="/folder/f2">head 2</a></summary>
    <details><summary>head 2.1</summary>
        content 1.1
    </details>
    <details><summary>head 2.2</summary>
        content 1.2
    </details>
</details>

Head 1

head 1.1 content 1.1
head 1.2 content 1.2
head 2
head 2.1 content 1.1
head 2.2 content 1.2

@real-jiakai
Copy link

real-jiakai commented Aug 14, 2022

<details>
<summary>

## close demo
</summary>
This is a default hidden place.
</details>

close demo

This is a default hidden place.

<details>
<summary open>

## open demo
</summary>
This is a default open place.
</details>

open demo

This is a default open place.

@ryanlewis
Copy link

Use pre and code tags to include codeblocks.

with code block
// code here

@auwsom
Copy link

auwsom commented Sep 29, 2022

Is there a way to toggle the content in side toggle? like:

<details>
<summary>head 1</summary>

    <details>
    <summary>head 1.1</summary>
    content
    </details>

</details>

For nested you need to use blockquote to get the indent:
https://gist.github.com/pierrejoubert73/902cc94d79424356a8d20be2b382e1ab?permalink_comment_id=4319884#gistcomment-4319884

Hello
World - click me to open
😄
  • item1
  • item2
  • item3
World
😄

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.

@mtbeek32
Copy link

Is there a way to remove the blank line between World - click me to open and World?

@DeltaPavonis
Copy link

@gavinhungry Oddly, this isn't working for me when I use it in VSCode (the summary still ends up on the line below), and I'm not sure why. I was wondering if you happened to know of any extensions or other workaround that might achieve the same?

@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

@rpdelaney
Copy link

Anybody manage to get this working with restructuredtext?

@jimken-mido
Copy link

I am also upgrading to Docusaurus 3.1.1 and getting this error for .md files with code in them:
Unexpected lazy line in expression in container, expected line to be prefixed with >when in a block quote, whitespace when in a list, etc

@webdev23
Copy link

It works for simple answers, but for longer README.md, the behavior is not consistent everywhere in every browsers.

Capture:
Github_bug_details_markdown

We have to pass an information such as Click to expand or why not an emoji like 👀, so it does render almost well everywhere.

<details>
<summary>👀
 
 ## Installation into *System*
</summary>

Make sure `./.local/bin` is sourced in your *PATH*

And run `./best_program.sh --install`

</details>
👀

Installation into System

Make sure ./.local/bin is sourced in your PATH

And run ./best_program.sh --install

@benburrill
Copy link

LaTeX math blocks in details are buggy and only seem to work if there is no previous math on the page. For example:

<details>
<summary>Math</summary>

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

It works once:

Math

$$ 1 + 1 = 2 $$

But it doesn't work twice:

Math

$$
1 + 1 = 2
$$

Top-level math blocks still works:

$$ 1 + 1 = 2 $$

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

$1 + 1 = 2$

Inline math

$1 + 1 = 2$

Is there any workaround for the math blocks?

@benburrill
Copy link

benburrill commented Apr 25, 2024

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

@dragontheory
Copy link

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

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