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

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 🙂