GitHub spoiler markdown.md

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

@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.

@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 :)

ninjas!

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

thanks mate!

@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!

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

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

The clear version:

<details>
<summary></summary>



</details>

Example

test

Example

test

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


very usefull, thanks a lot...

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

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

Updates:

Screenshot

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

• Screenshot

  

@dexston oh nice, thank you!

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

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   |

Thanks everyone for sharing this!