Skip to content

Instantly share code, notes, and snippets.

@jbsulli
Last active February 29, 2024 20:16
Star You must be signed in to star a gist
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

@tongyaop
Copy link

tongyaop commented Sep 8, 2023

It's possible to use markdown to embed image in spoiler but there must be a line break for some reason.

<details>
  <summary>Screenshot</summary>

  ![img](https://fakeimg.pl/200)
</details>

Screenshot

I have to do the same for my table. The indentation of the table in the markdown also determines the output

<details>
	<summary>spoiler alert: a table</summary>

| a   | b   | c   |
| --- | --- | --- |
| 1   | 2   | 3   |
</details>
spoiler alert: a table
a b c
1 2 3

<details>
	<summary>spoiler alert: a table</summary>

     | a   | b   | c   |
     | --- | --- | --- |
     | 1   | 2   | 3   |
</details>
spoiler alert: a table
 | a   | b   | c   |
 | --- | --- | --- |
 | 1   | 2   | 3   |

@phoenix-ua
Copy link

phoenix-ua commented Jan 31, 2024

Thanks everyone for sharing this!

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