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 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 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 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 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 commented Feb 11, 2020

ninjas!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.