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 · 30 comments

Comments

Projects
None yet
@aensley

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

This comment has been minimized.

Show comment
Hide comment
@Mottie

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

This comment has been minimized.

Show comment
Hide comment
@aensley

aensley 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?

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

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Jun 28, 2016

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

Mottie commented Jun 28, 2016

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

@aensley

This comment has been minimized.

Show comment
Hide comment
@aensley

aensley 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.)

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

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie 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 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

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Jul 4, 2016

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

https://github.com/Mottie/Octopatcher

Mottie commented Jul 4, 2016

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

https://github.com/Mottie/Octopatcher

@ide

This comment has been minimized.

Show comment
Hide comment
@ide

ide Jul 30, 2016

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

Click to expand

roflcopter

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

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

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Jul 30, 2016

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

Mottie commented Jul 30, 2016

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

@Mottie

This comment has been minimized.

Show comment
Hide comment
@Mottie

Mottie Sep 21, 2016

Firefox v49 is now live (since yesterday)!

Mottie commented Sep 21, 2016

Firefox v49 is now live (since yesterday)!

@TWiStErRob

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob 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

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

This comment has been minimized.

Show comment
Hide comment
@noam3127

noam3127 Dec 25, 2016

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

noam3127 commented Dec 25, 2016

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

This comment has been minimized.

Show comment
Hide comment
@Bluscream

Bluscream Dec 30, 2016

Click to expand whatever

Bluscream commented Dec 30, 2016

Click to expand whatever
@caseydwayne

This comment has been minimized.

Show comment
Hide comment
@caseydwayne

caseydwayne Jan 3, 2017

Solution provided above.

Search not, future seekers. Close issue?

caseydwayne commented Jan 3, 2017

Solution provided above.

Search not, future seekers. Close issue?

@TWiStErRob

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Jan 3, 2017

@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.

TWiStErRob commented Jan 3, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@brunolemos

brunolemos Aug 15, 2017

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>

brunolemos commented Aug 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@scottrigby

scottrigby Aug 15, 2017

@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

scottrigby commented Aug 15, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@brunolemos

brunolemos commented Aug 15, 2017

@scottrigby Awesome! Thanks.

@brutalcrozt

This comment has been minimized.

Show comment
Hide comment
@brutalcrozt

brutalcrozt Nov 27, 2017

In case you want to add numbering list and nested comment inside details tag.

Use empty line after summary tag, numbering item start from col 0.

<details/>
  <summary>List details</summary>

1. A
   > comment on first item

1. B
   > comment on second item

</details>

Will produce

List details
  1. A

    comment on first item

  2. B

    comment on second item

brutalcrozt commented Nov 27, 2017

In case you want to add numbering list and nested comment inside details tag.

Use empty line after summary tag, numbering item start from col 0.

<details/>
  <summary>List details</summary>

1. A
   > comment on first item

1. B
   > comment on second item

</details>

Will produce

List details
  1. A

    comment on first item

  2. B

    comment on second item

@dylib

This comment has been minimized.

Show comment
Hide comment
@dylib

dylib Jan 5, 2018

Adding to the other tips regarding <details>, there are some other tags which work within it as well:

(<pre>, <table>,<h1>,<hr>, <a name>, <sub>).

Multiple html tags examples

<pre>"pre" tags</pre>

"pre" tags

<table>
<tr><td colspan="2">Tables</td></tr>
<tr><td>column one</td><td>column two</td></tr>
</table>

Tables
column one column two

<h1>headline</h1>

Headline

<hr></hr>


<a name="anchor"><a href="#anchor">anchor reference</a>

anchor reference

<sub>Subtext for less emphasis, etc.</sub>

Subtext for less emphasis, etc.

dylib commented Jan 5, 2018

Adding to the other tips regarding <details>, there are some other tags which work within it as well:

(<pre>, <table>,<h1>,<hr>, <a name>, <sub>).

Multiple html tags examples

<pre>"pre" tags</pre>

"pre" tags

<table>
<tr><td colspan="2">Tables</td></tr>
<tr><td>column one</td><td>column two</td></tr>
</table>

Tables
column one column two

<h1>headline</h1>

Headline

<hr></hr>


<a name="anchor"><a href="#anchor">anchor reference</a>

anchor reference

<sub>Subtext for less emphasis, etc.</sub>

Subtext for less emphasis, etc.

@vdsabev vdsabev referenced this issue Jan 7, 2018

Merged

Update docs #5

2 of 2 tasks complete
@kas-kad

This comment has been minimized.

Show comment
Hide comment
@kas-kad

kas-kad Jan 23, 2018

Can we have this luxury (Collapsible contents, spoilers etc) for wiki markdown pages?

kas-kad commented Jan 23, 2018

Can we have this luxury (Collapsible contents, spoilers etc) for wiki markdown pages?

@u32i64

This comment has been minimized.

Show comment
Hide comment
@u32i64

u32i64 Feb 23, 2018

:octocat: Overflow

GitHub


Overflow

Source

<details><summary> :octocat: Overflow </summary><p>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> GitHub <hr></hr> Overflow

</p></details>

u32i64 commented Feb 23, 2018

:octocat: Overflow

GitHub


Overflow

Source

<details><summary> :octocat: Overflow </summary><p>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> GitHub <hr></hr> Overflow

</p></details>

@Relequestual

This comment has been minimized.

Show comment
Hide comment
@Relequestual

Relequestual Jul 11, 2018

Looks like this can be closed then!

Relequestual commented Jul 11, 2018

Looks like this can be closed then!

@TWiStErRob

This comment has been minimized.

Show comment
Hide comment
@TWiStErRob

TWiStErRob Jul 11, 2018

@Relequestual why is that so? We have a hack workaround only, the feature is still wanted by many.

TWiStErRob commented Jul 11, 2018

@Relequestual why is that so? We have a hack workaround only, the feature is still wanted by many.

@Relequestual

This comment has been minimized.

Show comment
Hide comment
@Relequestual

Relequestual Jul 17, 2018

I didn't realise it was a workaround.
Re-reading the original post, I agree this is not resolved!

Relequestual commented Jul 17, 2018

I didn't realise it was a workaround.
Re-reading the original post, I agree this is not resolved!

@Ishinoshita

This comment has been minimized.

Show comment
Hide comment
@Ishinoshita

Ishinoshita Jul 26, 2018

Is it possible to make pictures collapsible?
When I insert a picture in the middle of a collapsible block, the whole block is no more collapsible.

Ishinoshita commented Jul 26, 2018

Is it possible to make pictures collapsible?
When I insert a picture in the middle of a collapsible block, the whole block is no more collapsible.

@vintagesucks

This comment has been minimized.

Show comment
Hide comment
@vintagesucks

vintagesucks Jul 26, 2018

@Ishinoshita

<details>
  <summary>Click to view picture</summary>
  Picture in the middle of...
  
  ---

  ![Picture](https://avatars3.githubusercontent.com/u/37498331?s=88&v=4 "Picture")

  ---

  ...a collapsible block
</details>
Click to view picture Picture in the middle of...

Picture


...a collapsible block

vintagesucks commented Jul 26, 2018

@Ishinoshita

<details>
  <summary>Click to view picture</summary>
  Picture in the middle of...
  
  ---

  ![Picture](https://avatars3.githubusercontent.com/u/37498331?s=88&v=4 "Picture")

  ---

  ...a collapsible block
</details>
Click to view picture Picture in the middle of...

Picture


...a collapsible block

@Ishinoshita

This comment has been minimized.

Show comment
Hide comment
@Ishinoshita

Ishinoshita Jul 28, 2018

@vintagesucks : Thank you for the evidence it actually works! I must have screw up somewhere. Will retry.

Ishinoshita commented Jul 28, 2018

@vintagesucks : Thank you for the evidence it actually works! I must have screw up somewhere. Will retry.

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