Collapsible contents (code block) in comments / spoiler tag

[aensley]

Related: #154, isaacs/github#208

GitHub really needs a way to collapse long contents. Being able to collapse entire comments may suffice for most. To me however, the ideal solution would be to collapse any code block with more than 10 lines (or whatever number) by default. The code block would be replaced by the text:

Code (130 lines) - Expand

Where clicking "Expand" reveals the code block. Being able to specify a collapsible code block with ````collapse` would work equally as well. I recall reading a discussion about this feature involving some GitHub developers. I can't find the link to that discussion, but their response at the time was "We'll implement it when CommonMark does."

Here's the CommonMark discussion: http://talk.commonmark.org/t/what-could-a-spoiler-tag-extension-look-like/767

The GitHub Markdown guide hasn't been updated in over 2 years: https://guides.github.com/features/mastering-markdown/

Perhaps it's time to stop waiting for CommonMark to change and simply add this functionality to GitHub's Web UI; no MarkDown hacks required.

[Mottie]

In case you're interested, I just created a userscript to collapse code & long quote blocks in comments.

[aensley]

@Mottie That is fantastic! That is exactly what I'm looking for. Any chance you could turn that into Chrome Extension so that it could be synced across browsers?

[Mottie]

That shouldn't be a problem, but what do you mean by "synced across browsers"?

[aensley]

If you setup your Google account on Google Chrome, it can sync extensions and settings between different instances of Google Chrome (laptop, desktop, chromebook, etc.)

[Mottie]

Oh, you can do that with Tampermonkey's TESLA.

And now that I think about, it might be a bit more painful than I initially thought. If I make more than one addon, I'll need to move each userscript into its own subdirectory with a manifest.json. That might take a bit longer.

[Mottie]

Ok, I finally got around to creating a Chrome extension. Enjoy!

https://github.com/Mottie/Octopatcher

[ide]

For what it's worth, collapsible sections are supported:

Click to expand

<details>
  <summary>Click to expand</summary>
  whatever
</details>

[Mottie]

@ide The details block won't work in Firefox until v49 (see necolas/normalize.css#604).

[Mottie]

Firefox v49 is now live (since yesterday)!

[TWiStErRob]

Building on @ide's answer, here's how to handle code blocks inside <details>:

stuff with _mark_ **down**

formatted heading with a

code block

Collapsible until here.

The key is to wrap the whole contents inside the <p>:

<details><summary>stuff with *mark* **down**</summary><p>

## _formatted_ **heading** with [a](link)

---
{{standard 3-backtick code block omitted from here due to escaping issues}}
---

Collapsible until here.
</p></details>

For more details see: http://stackoverflow.com/a/39920717/253468

[noam3127]

Though not directly related to this discussion, I just published a handy new Chrome extension that enables code-folding when viewing files in GitHub and I hope many people find it as useful as I do. Works for any indentation style - tabs, 2 spaces, 4 spaces, etc. https://github.com/noam3127/github-code-folding

[Bluscream]

Click to expand

whatever

[caseydwayne]

Solution provided above.

Search not, future seekers. Close issue?

[TWiStErRob]

@caseydwayne I object to closing, I don't think of <details> as a solution, more like a workaround/hack. It's HTML after all, not GFM. It has issues, like not being cross-browser and non-trivial nesting of code blocks I pointed out above.

[brunolemos]

How to format code inside the collapsed block? Tried the <p> trick but didn't work.

Summary

```js const x = 1 ```

<details>
 <summary>Summary</summary>
<p>
'''js
const x = 1
''' (change to `)
</p>
</details>

[scottrigby]

@brunolemos Add an extra line break before the tics.

From this:

<details>
 <summary>Summary</summary>
```js
const x = 1
```
</details>

To this:

<details>
 <summary>Summary</summary>

```js
const x = 1
```
</details>

In action:

Summary

const x = 1

[brunolemos]

@scottrigby Awesome! Thanks.

[me2beats]

can I make summary tittle bigger?
I tried
## <details><summary>ABOUT THE PROJECT</summary>
but it doesn't seem to work

[htcfreek]

can I make summary tittle bigger?
I tried
## <details><summary>ABOUT THE PROJECT</summary>
but it doesn't seem to work

You can try <details><summary><h3>ABOUT THE PROJECT</h3></summary>

ABOUT THE PROJECT

Details text.

[matronator]

Any news on this? I found this issue on an SO answer after reading through the long crash report comment on this issue VSCodium/vscodium#358. Would be really useful to be able to collapse ALL comments similarly how you can on Reddit.

[Kebap]

How can I use checkmarks inside spoiler? This is a checkmark:

• Click me to toggle checked state

Where * [ ] starts an unchecked, and * [x] starts a checked line.

However inside the spoiler, toggling state will collapse the spoiler..!

Open me and check three marks!

• Click me, please!
• Me too!
• And me again!

This is especially troublesome in longer spoilers than I showed above.
You will loose the scroll-state, and need to click much more than thrice.

[Wohlstand]

When using the tag, pictures getting not working:

some


At Wiki this won't show, at issue comment here it works:

[andreymal]

Just add a empty line after <details>/<summary>

Click me

[pilyay]

Hello!

I want to make the name of the spoiler as a link, how do you think such an entry in markdown is correct?

[<details><summary>Chapter 1</summary>](#chapter_1)

    * [Chapter 1.1](#chapter_1_1)
    * [Chapter 1.2](#chaper_1_2)

</details>

[glibg10b]

@pilyay

<details>
  <summary><a href="#chapter_1">Chapter 1</a></summary>

  * [Chapter 1.1](#chapter_1_1)
  * [Chapter 1.2](#chaper_1_2)

</details>

Chapter 1

• Chapter 1.1
• Chapter 1.2

[Berchon]

I'm trying to do the same as @pilyay , but unfortunately your suggestion didn't work for me, @glibg10b .

[glibg10b]

@Berchon maybe try a different browser? I think <details/>'s implementation varies between browsers. I am using Firefox and it works fine.

[TWiStErRob]

@Berchon what does "doesn't work" mean in your case? I tried Android Chrome and it was hard to expand because we can't click on the link or the arrow, only on the right side of the line. After that it jumps to heading as expected. I guess adding more (unlinked) text would make this better. Note: the empty line after summary and before details is sometimes very important.

[porg]

@ide and @TWiStErRob thanks for your practical solutions!

• ℹ️ That the workaround (already 5 years now…) is not forgotten buried deep in a issue discussion I requested from GitHub to please at least: Amend Markdown help page with chapter “Collapsible code block (aka spoiler)"
• 👍 I agree to not close the issue, as a spoiler tag shall definitely make it into the official GitHub flavored Markdown syntax!

[aniespica]

How can I use checkmarks inside spoiler? This is a checkmark:

• Click me to toggle checked state

Where * [ ] starts an unchecked, and * [x] starts a checked line.

However inside the spoiler, toggling state will collapse the spoiler..!

Open me and check three marks!
This is especially troublesome in longer spoilers than I showed above. You will loose the scroll-state, and need to click much more than thrice.

Am I having these problems any solution?

[a-pav]

Is there any shortcut / autocomplete / button to spawn a <detail> tag, ready to be filled in?
I hate that every time I have to look it up or type it down!

[vintagesucks]

Is there any shortcut / autocomplete / button to spawn a tag, ready to be filled in?

@a-pav The Refined GitHub browser extension adds a button to do just that:

[PieterjanDeClippel]

Works without any extension whatsoever:

Click to expand

<details>
<summary>Click to expand</summary>

```html
<h1>Hello world</h1>
<h2>This is me</h2>
```

</details>

Note that you need to leave an addtitional newline around the code block

Test using an image

Here's a gist

[TWiStErRob]

@PieterjanDeClippel yes it does. The point in recent conversations is that a UI interaction is better than manual typing/Google-copy-paste, an interaction would ideally take care of annoyances like remembering to insert those new lines.