Skip to content

Instantly share code, notes, and snippets.

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:

https://github.com/dear-github/dear-github/issues/166

@Kickimanjaro

This comment has been minimized.

Copy link

@Kickimanjaro Kickimanjaro commented Nov 14, 2019

Thank you very much for this gist!

Question: Let's say I have a list and several items in the list have a <details> block, is it possible to indent these blocks so as to not mess up the list indentation? In the below example I would prefer if the arrow and expanded content could be indented under the list.

Example:

1. First item with a hidden code block
<details>
  <summary>Example</summary>

  ```
  long console output here
  ```
</details>

2. Second item with a hidden code block
<details>
  <summary>Example</summary>

  ```
  long console output here
  ```
</details>

3. Third item with a hidden code block
<details>
  <summary>Example</summary>

  ```
  long console output here
  ```
</details>
  1. First item with a hidden code block
Example
long console output here
  1. Second item with a hidden code block
Example
long console output here
  1. Third item with a hidden code block
Example
long console output here
@masterl

This comment has been minimized.

Copy link

@masterl masterl commented Nov 17, 2019

@Kickimanjaro One option: (Couldn't get the 3 back ticks to work)

1. First item with a hidden code block
  - <details><summary>Example</summary>
    <pre>
    long console output here
    </pre>
   </details>

2. Second item with a hidden code block
  - <details><summary>Example</summary>
    <pre>
    long console output here
    </pre>
   </details>

3. Third item with a hidden code block
  - <details><summary>Example</summary>
    <pre>
    long console output here
    </pre>
   </details>
  1. First item with a hidden code block
  • Example
    long console output here
    
  1. Second item with a hidden code block
  • Example
    long console output here
    
  1. Third item with a hidden code block
  • Example
    long console output here
    
@klavatron

This comment has been minimized.

Copy link

@klavatron klavatron commented Jan 7, 2020

@masterl One option: (Couldn't get the 3 back ticks to work)

Hello! You need to put an empty line between summary and 3 back ticks, like in Kickimanjaro's example.

@masterl

This comment has been minimized.

Copy link

@masterl masterl commented Jan 9, 2020

@klavatron I thought I had tried that.

Not sure if GitHub updated something between my post and yours, but it works as you said. Thanks :)

@gresbtim

This comment has been minimized.

Copy link

@gresbtim gresbtim commented Feb 11, 2020

ninjas!

@Delnegend

This comment has been minimized.

Copy link

@Delnegend Delnegend commented Jun 21, 2020

@Kickimanjaro You meant this?

  1. First item with a hidden code block

    Example
    long console output here
    
  2. Second item with a hidden code block

    Example
    long console output here
    
  3. Third item with a hidden code block

    Example
    long console output here
    
1. First item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

2. Second item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

3. Third item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>
@Dr-McFish

This comment has been minimized.

Copy link

@Dr-McFish Dr-McFish commented Feb 19, 2021

thanks mate!

@Kickimanjaro

This comment has been minimized.

Copy link

@Kickimanjaro Kickimanjaro commented May 5, 2021

@Kickimanjaro You meant this?

  1. First item with a hidden code block

    Example

    long console output here
    
  2. Second item with a hidden code block

    Example

    long console output here
    
  3. Third item with a hidden code block

    Example

    long console output here
    
1. First item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

2. Second item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

3. Third item with a hidden code block
    <details>
      <summary>Example</summary>

      ```
      long console output here
      ```
    </details>

It took me a while to see this again but yes, thank you very much @Delnegend!

@slowpeek

This comment has been minimized.

Copy link

@slowpeek slowpeek commented Jul 20, 2021

It can be used to embed spoilers into orgmode markup at github as well:

#+html: <details><summary>spoiler warning</summary>
spoiler content
#+html: </details>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment