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

Thank you very much for this gist!

Question: Let's say I have a list and several items in the list have a <details> block, is it possible to indent these blocks so as to not mess up the list indentation? In the below example I would prefer if the arrow and expanded content could be indented under the list.

Example:

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>

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

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

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

2. Second item with a hidden code block
  - <details><summary>Example</summary>
    <pre>
    long console output here
    </pre>
   </details>

3. Third item with a hidden code block
  - <details><summary>Example</summary>
    <pre>
    long console output here
    </pre>
   </details>

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
  

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

@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

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:

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:

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

Spoiler: It works! 😎

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