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

Spacing Issue Resolved?

FYI ... I think that the space thing has largely been resolved ... as I've used these in lists (both ordered and unordered) in the past. 👍

I think it is only required if you are including markdown inside the spoiler.

I accept that this may have been the whole purpose of this gist, given the title, but ... just thought I'd mention it.

If you wish to see my suggested usage, see the 'How To' section, below.

You could very easily use the below to put spoilers in a list like this:

1. One - There's more if you tap me ...

   See? You can even include more code: <details>... just make sure you close </details> afterward.

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

2. Two - There's more if you tap me, too ...

   See?
3. Three - This one has layers, heh ...

   Not here, silly ...
   1. A - I'm helping ...

      Like Ralph
   2. B - You're not, you suck ...

      I mean, harsh ... but fair ...
   3. C - Why are any of us here?

      42
4. Four - I'm just here to wrap ...

   ... things up!

I've included all sorts in spoilers, purely as a way to include as much information as possible without polluting the main point of a post, issue, reply, whatever. 👍

---

How To

Working with the example above ...

Visual

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>... just make sure you close </details> afterward.

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

Code

<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 <code>&lt;details&gt;</code>... just make sure you close <code>&lt;/details&gt;</code> afterward.<pre lang="javascript"><code>console.log("I'm a code block!");</code></pre></details>