Skip to content

Instantly share code, notes, and snippets.

@jbsulli
Last active October 20, 2024 04:12
Show Gist options
  • Save jbsulli/03df3cdce94ee97937ebda0ffef28287 to your computer and use it in GitHub Desktop.
Save jbsulli/03df3cdce94ee97937ebda0ffef28287 to your computer and use it in GitHub Desktop.

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

@gresbtim
Copy link

ninjas!

@Delnegend
Copy link

@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

thanks mate!

@Kickimanjaro
Copy link

@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

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>

@joshxyzhimself
Copy link

Example

test

@joshxyzhimself
Copy link

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

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

@dexston
Copy link

dexston commented Sep 26, 2022

@girng using HTML format in one line
* <details><summary>Screenshot</summary><img src="https://fakeimg.pl/200"></details>

  • Screenshot

@girng
Copy link

girng commented Sep 27, 2022

@dexston oh nice, thank you!

@Jiab77
Copy link

Jiab77 commented Mar 8, 2023

For better spacing before and after the spoiler, you can prefix / surround the whole block by <p></p>.

You should get something like that:

<p>
<details>
<summary>Spaced spoiler</summary>

<!-- Markdown content here -->

</details>
</p>

And the result here:

Spaced spoiler
console.log('Hello world!');

Some text blah blah...

@tongyaop
Copy link

tongyaop commented Sep 8, 2023

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

I have to do the same for my table. The indentation of the table in the markdown also determines the output

<details>
	<summary>spoiler alert: a table</summary>

| a   | b   | c   |
| --- | --- | --- |
| 1   | 2   | 3   |
</details>
spoiler alert: a table
a b c
1 2 3

<details>
	<summary>spoiler alert: a table</summary>

     | a   | b   | c   |
     | --- | --- | --- |
     | 1   | 2   | 3   |
</details>
spoiler alert: a table
 | a   | b   | c   |
 | --- | --- | --- |
 | 1   | 2   | 3   |

@phoenix-ua
Copy link

phoenix-ua commented Jan 31, 2024

Thanks everyone for sharing this!

@Jiab77
Copy link

Jiab77 commented May 20, 2024

@tongyaop The reason why you need to leave a blank line between the HTML used by the spoiler and the markdown code you are using for rendering the image is due to the parsing engine.

You can easily mix markdown with HTML (knowing that only a limited subset of HTML tags is supported) as long as you always leave blank lines in between to allow the parser to do its job correctly.

You can also replace your example by going full HTML and so, no need to keep blank lines.

It would look that way:

<details>
  <summary>Screenshot</summary>
  <img src="https://fakeimg.pl/200" alt="fake-img">
</details>

Which should render as follow:

Screenshot fake-img

If you ever need to center you image without using HTML code for rendering the image, you can do the following:

<div align="center">

![img](https://fakeimg.pl/200)

</div>

Which then should render that way:

img

You might then think "why not use the magic align="center" trick everywhere??"

Simply because this:

<img src="https://fakeimg.pl/200" alt="fake-img" align="center">

Would then render:

fake-img

So you can't use align="center" everywhere and as far I know, it only works with <div> and <h1> like tags and maybe <p> tags but nowhere else.

Now because, I'm curious, let's see if the following does work or not:

<details>
  <summary>Screenshot</summary>
  <div align="center">

  ![img](https://fakeimg.pl/200)

  </div>
</details>

Result:

Screenshot

img

Spoiler: It works! 😎

Hope to have been helpful and shared some useful insights about markdown parsing 🙂

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