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

If you combine the spoiler tag with quoting, then when expanded the vertical quote bar makes it is easier to see what can be collapsed

<details><summary></summary>

> whatever markdown....
> ``` SQL
> SELECT sqrt(sqrt(2143.0/22))
> ``` 
> blah blah....

</details>

blah blah after the collapsable section

renders like

whatever markdown....

SELECT sqrt(sqrt(2143.0/22))

blah blah....

blah blah after the collapsable section

with that information i did something random in dosbox, just did i put this

<details><summary></summary>

> idk what to put
> ``` dos
> mount c C:/dosgames/rayman/
> c:
> cd rayman
> rayman.exe
> ``` 
> nothing to say here, i wanted to put some rayman 
> execute code for dosbox

</details>
did try this xd

renders me this:

idk what to put

mount c C:/dosgames/rayman/
c:
cd rayman
rayman.exe

nothing to say here, i wanted to put some rayman
execute code for dosbox

did try this xd

@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://picsum.photos/200?random=1" 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://picsum.photos/200?random=3)

</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://picsum.photos/200?random=5" 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://picsum.photos/200?random=7)

  </div>
</details>

Result:

Screenshot

Spoiler: It works! 😎

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

i also tried that:

Spoiler: i added a deltarune meme for test (the I'm old! one)

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>