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 · 39 comments
Open

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

aensley opened this issue May 24, 2016 · 39 comments

Comments

@aensley
Copy link

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

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

@aensley 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 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 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 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 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 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 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 Mottie commented Sep 21, 2016

Firefox v49 is now live (since yesterday)!

@TWiStErRob
Copy link

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

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

@Bluscream Bluscream commented Dec 30, 2016

Click to expand whatever
@caseydwayne
Copy link

@caseydwayne caseydwayne commented Jan 3, 2017

Solution provided above.

Search not, future seekers. Close issue?

@TWiStErRob
Copy link

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

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

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

@brunolemos brunolemos commented Aug 15, 2017

@scottrigby Awesome! Thanks.

@xgqfrms
Copy link

@xgqfrms xgqfrms commented Mar 20, 2019

space line break & indent 4 space

demo

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

    ```js
        console.log(`hello world!`);
    ```
    </details>
Click to expand
    console.log(`hello world!`);

ok

image

source codes

image

@furai
Copy link

@furai furai commented Mar 29, 2019

So is wrapping in <p></p> required or not? I see some examples using it and some not.

@KelSolaar
Copy link

@KelSolaar KelSolaar commented Oct 4, 2019

Anybody managed to get that working with reStructuredText also?

Getting the foldable block is easy if you use the .. raw:: html directive but then everything inside is rendered as HTML, opening the <details> block and closing it as follows does not work unfortunately:

.. raw:: html

    <details>
        <summary>Stuff with <em>reStructuredText</em></summary>

Title
#####

Sub-Title
---------

.. raw:: html

    </details>
@lemmy
Copy link

@lemmy lemmy commented Dec 3, 2019

It's cumbersome to indent a long (code) block with 4 spaces, which is likely the main use case for collapsed blocks in the first place.

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).
@rockingdice
Copy link

@rockingdice rockingdice commented Dec 15, 2019

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

@Berkmann18 Berkmann18 commented Apr 7, 2020

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 htcfreek commented Apr 25, 2020

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

@me2beats
Copy link

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

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

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.