Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Demo:

Spoiler warning

Spoiler text. Note that it's important to have a space after the summary tag. You should be able to write any markdown you want inside the <details> tag... just make sure you close <details> afterward.

console.log("I'm a code block!");

How to:

<details>
  <summary>Spoiler warning</summary>
  
  Spoiler text. Note that it's important to have a space after the summary tag. You should be able to write any markdown you want inside the `<details>` tag... just make sure you close `<details>` afterward.
  
  ```javascript
  console.log("I'm a code block!");
  ```
  
</details>

Credits:

dear-github/dear-github#166

@klavatron
Copy link

klavatron commented Jan 7, 2020

@masterl One option: (Couldn't get the 3 back ticks to work)

Hello! You need to put an empty line between summary and 3 back ticks, like in Kickimanjaro's example.

@masterl
Copy link

masterl commented Jan 9, 2020

@klavatron I thought I had tried that.

Not sure if GitHub updated something between my post and yours, but it works as you said. Thanks :)

@gresbtim
Copy link

gresbtim commented Feb 11, 2020

ninjas!

@Delnegend
Copy link

Delnegend commented Jun 21, 2020

@Kickimanjaro You meant this?

  1. First item with a hidden code block

    Example
    long console output here
    
  2. Second item with a hidden code block

    Example
    long console output here
    
  3. Third item with a hidden code block

    Example
    long console output here
    
1. First item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

2. Second item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

3. Third item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

@Dr-McFish
Copy link

Dr-McFish commented Feb 19, 2021

thanks mate!

@Kickimanjaro
Copy link

Kickimanjaro commented May 5, 2021

@Kickimanjaro You meant this?

  1. First item with a hidden code block

    Example

    long console output here
    
  2. Second item with a hidden code block

    Example

    long console output here
    
  3. Third item with a hidden code block

    Example

    long console output here
    
1. First item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

2. Second item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

3. Third item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

It took me a while to see this again but yes, thank you very much @Delnegend!

@slowpeek
Copy link

slowpeek commented Jul 20, 2021

It can be used to embed spoilers into orgmode markup at github as well:

#+html: <details><summary>spoiler warning</summary>
spoiler content
#+html: </details>

@AlttiRi
Copy link

AlttiRi commented Apr 19, 2022

The clear version:

<details>
<summary></summary>



</details>

@TheGreatZin
Copy link

TheGreatZin commented Apr 23, 2022

how would I make it bold for example?

<details>
  <summary>**Example**</summary>

<details>

this doesn't work

@TheGreatZin
Copy link

TheGreatZin commented Apr 23, 2022

nvm

<details>
  <summary><h3>Example</h3></summary>

<details>

@joshxyzhimself
Copy link

joshxyzhimself commented Apr 28, 2022

Example

test

@joshxyzhimself
Copy link

joshxyzhimself commented Apr 28, 2022

Example

test

@CodeBrauer
Copy link

CodeBrauer commented May 22, 2022

When adding images in spoiler/details, the image must be i in HTML format, not markdown:

Examples

<details>
  <summary>Screenshot</summary>
  <img src="https://fakeimg.pl/200">
</details>
Screenshot
<details>
  <summary>Screenshot</summary>
  ![img](https://fakeimg.pl/200)
</details>
Screenshot ![img](https://fakeimg.pl/200)

@chronoss09
Copy link

chronoss09 commented Jun 18, 2022

very usefull, thanks a lot...

@lopezloo
Copy link

lopezloo commented Jul 4, 2022

It's possible to use markdown to embed image in spoiler but there must be a line break for some reason.

<details>
  <summary>Screenshot</summary>

  ![img](https://fakeimg.pl/200)
</details>
Screenshot

img

@girng
Copy link

girng commented Aug 2, 2022

is there a way on how to put them inside a bulleted point list? I tried, but it looks funky

Updates:

Screenshot

img

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