Skip to content

Instantly share code, notes, and snippets.

@jbsulli
Last active July 22, 2024 19:31
Show Gist options
  • Save jbsulli/03df3cdce94ee97937ebda0ffef28287 to your computer and use it in GitHub Desktop.
Save jbsulli/03df3cdce94ee97937ebda0ffef28287 to your computer and use it in GitHub Desktop.

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

@Jiab77
Copy link

Jiab77 commented May 20, 2024

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

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:

img

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:

fake-img

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

img

Spoiler: It works! 😎

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment