Skip to content

Instantly share code, notes, and snippets.

@jbsulli
Last active June 10, 2023 15:08
Star You must be signed in to star a gist
Embed
What would you like to do?

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

@girng
Copy link

girng commented Aug 2, 2022

is there a way on how to put them inside a bulleted point list? I tried, but it looks funky

Updates:

Screenshot

img

@dexston
Copy link

dexston commented Sep 26, 2022

@girng using HTML format in one line
* <details><summary>Screenshot</summary><img src="https://fakeimg.pl/200"></details>

  • Screenshot

@girng
Copy link

girng commented Sep 27, 2022

@dexston oh nice, thank you!

@Jiab77
Copy link

Jiab77 commented Mar 8, 2023

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...

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