Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collapsible contents (code block) in comments / spoiler tag #166

Open
aensley opened this issue May 24, 2016 · 50 comments
Open

Collapsible contents (code block) in comments / spoiler tag #166

aensley opened this issue May 24, 2016 · 50 comments

Comments

@aensley
Copy link

aensley commented May 24, 2016

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
Copy link

Mottie commented Jun 27, 2016

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

github-collapse-in-comment

@aensley
Copy link
Author

aensley commented Jun 28, 2016

@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
Copy link

Mottie commented Jun 28, 2016

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

@aensley
Copy link
Author

aensley commented Jun 28, 2016

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
Copy link

Mottie commented Jun 28, 2016

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
Copy link

Mottie commented Jul 4, 2016

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

https://github.com/Mottie/Octopatcher

@ide
Copy link

ide commented Jul 30, 2016

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

Click to expand

roflcopter

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

@Mottie
Copy link

Mottie commented Jul 30, 2016

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

@Mottie
Copy link

Mottie commented Sep 21, 2016

Firefox v49 is now live (since yesterday)!

@TWiStErRob
Copy link

TWiStErRob commented Oct 7, 2016

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
Copy link

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
Copy link

Click to expand whatever

@caseydwayne
Copy link

Solution provided above.

Search not, future seekers. Close issue?

@TWiStErRob
Copy link

@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
Copy link

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
Copy link

@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
Copy link

@scottrigby Awesome! Thanks.

@rockingdice
Copy link

Maybe better if there's a syntactic sugar for the spoiler tag.

krichter722 added a commit to krichter722/helm-charts that referenced this issue Dec 15, 2019
…template

The output can be quite long and long output clutters up the issue description.

Note that the empty line is necessary in order for the code to be parsed correctly (see dear-github/dear-github#166 (comment) for details).
@Berkmann18
Copy link

It will be nice indeed to have that for long pieces of code or even text.

As far as the <details>+<summary> workaround, it's now, widely supported so it shouldn't be a problem for most people.
Here's the CanIUse info:
image

@htcfreek
Copy link

htcfreek commented Apr 25, 2020

The <details>+<summary>-Element don't work in the Github app for Android.

@me2beats
Copy link

me2beats commented Apr 25, 2020

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

@htcfreek
Copy link

htcfreek commented Apr 25, 2020

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
Copy link

matronator commented Oct 31, 2020

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
Copy link

Kebap commented Dec 1, 2020

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
Copy link

When using the tag, pictures getting not working:

some ![peshka](https://user-images.githubusercontent.com/6751442/107185174-fcd8c980-69f2-11eb-89d4-0843c47d781b.jpeg)

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

@andreymal
Copy link

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

Click me

peshka

@pilyay
Copy link

pilyay commented Apr 28, 2021

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
Copy link

glibg10b commented Jun 23, 2021

@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

@Berchon
Copy link

Berchon commented Jul 4, 2021

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

@glibg10b
Copy link

glibg10b commented Jul 4, 2021

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

@TWiStErRob
Copy link

@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
Copy link

porg commented Oct 8, 2021

@ide and @TWiStErRob thanks for your practical solutions!

@aniespica
Copy link

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests