Skip to content

Instantly share code, notes, and snippets.

@joyrexus
Last active February 24, 2024 15:16
Show Gist options
  • Save joyrexus/16041f2426450e73f5df9391f7f7ae5f to your computer and use it in GitHub Desktop.
Save joyrexus/16041f2426450e73f5df9391f7f7ae5f to your computer and use it in GitHub Desktop.
collapsible markdown

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

@ak2766
Copy link

ak2766 commented Oct 17, 2021

Some serious magic going on here. Really helps tame long pastes.

@Wrascon
Copy link

Wrascon commented Nov 19, 2021

And how? Where is my images?

CrystalDiskInfo ![image](https://user-images.githubusercontent.com/17739216/142601548-ce0070ec-221d-4722-9306-b8f34f5b2663.png)
CrystalDiskMark C ![image](https://user-images.githubusercontent.com/17739216/142598724-3a2354cd-a178-4866-82ba-9cf42543dfb6.png)
C:\ CDM_20211119122746 ------------------------------------------------------------------------------ CrystalDiskMark 7.0.0 x64 (C) 2007-2019 hiyohiyo Crystal Dew World: https://crystalmark.info/ ------------------------------------------------------------------------------ * MB/s = 1,000,000 bytes/s [SATA/600 = 600,000,000 bytes/s] * KB = 1000 bytes, KiB = 1024 bytes

[Read]
Sequential 1MiB (Q= 8, T= 1): 100.873 MB/s [ 96.2 IOPS] < 82613.63 us>
Sequential 1MiB (Q= 1, T= 1): 49.007 MB/s [ 46.7 IOPS] < 21282.71 us>
Random 4KiB (Q= 32, T=16): 0.640 MB/s [ 156.3 IOPS] <519876.99 us>
Random 4KiB (Q= 1, T= 1): 0.350 MB/s [ 85.4 IOPS] < 11667.33 us>

[Write]
Sequential 1MiB (Q= 8, T= 1): 94.593 MB/s [ 90.2 IOPS] < 85754.18 us>
Sequential 1MiB (Q= 1, T= 1): 95.837 MB/s [ 91.4 IOPS] < 10927.93 us>
Random 4KiB (Q= 32, T=16): 1.091 MB/s [ 266.4 IOPS] <309245.24 us>
Random 4KiB (Q= 1, T= 1): 1.040 MB/s [ 253.9 IOPS] < 3920.22 us>

Profile: Default
Test: 1 GiB (x5) [Interval: 5 sec] <DefaultAffinity=DISABLED>
Date: 2021/11/19 12:27:46
OS: Windows 7 Professional [6.1 Build 7601] (x64)

CrystalDiskMark D ![image](https://user-images.githubusercontent.com/17739216/142594941-d6e3a656-fed3-4976-8585-614d939bda4a.png)
D:\ CDM_20211119121947 ------------------------------------------------------------------------------ CrystalDiskMark 7.0.0 x64 (C) 2007-2019 hiyohiyo Crystal Dew World: https://crystalmark.info/ ------------------------------------------------------------------------------ * MB/s = 1,000,000 bytes/s [SATA/600 = 600,000,000 bytes/s] * KB = 1000 bytes, KiB = 1024 bytes

[Read]
Sequential 1MiB (Q= 8, T= 1): 78.859 MB/s [ 75.2 IOPS] <104558.06 us>
Sequential 1MiB (Q= 1, T= 1): 67.952 MB/s [ 64.8 IOPS] < 15376.81 us>
Random 4KiB (Q= 32, T=16): 0.579 MB/s [ 141.4 IOPS] <546235.94 us>
Random 4KiB (Q= 1, T= 1): 0.304 MB/s [ 74.2 IOPS] < 13403.89 us>

[Write]
Sequential 1MiB (Q= 8, T= 1): 76.762 MB/s [ 73.2 IOPS] <107149.88 us>
Sequential 1MiB (Q= 1, T= 1): 57.834 MB/s [ 55.2 IOPS] < 18034.57 us>
Random 4KiB (Q= 32, T=16): 1.084 MB/s [ 264.6 IOPS] <408687.55 us>
Random 4KiB (Q= 1, T= 1): 0.896 MB/s [ 218.8 IOPS] < 4561.90 us>

Profile: Default
Test: 1 GiB (x5) [Interval: 5 sec] <DefaultAffinity=DISABLED>
Date: 2021/11/19 12:19:47
OS: Windows 7 Professional [6.1 Build 7601] (x64)

@sl1pkn07
Copy link

sl1pkn07 commented Nov 19, 2021

You neen new line between <details> the image and </details>

https://gist.github.com/joyrexus/16041f2426450e73f5df9391f7f7ae5f#gistcomment-3041229

@sahin52
Copy link

sahin52 commented Nov 25, 2021

Without adding new line, the code block does not work as expected.

@darshan315
Copy link

darshan315 commented Dec 27, 2021

@niceguysforhelp How did you make the header collapsible above (that too in line). Mine comes below one line and not beside the arrow.

Header

<details>
<summary>
  
# Header
</summary>
<p>
</details>

@Legendary-Person
Copy link

@darshan315 It seems like we need to use CSS in-order to fix the in-Line problem.

details summary > * { display: inline; }

Some Info:-

-A couple notes on this technique. First, I recommend using inline, and not inline-block, as the line wrapping issue still occurs with inline-block when the heading text extends beyond one line.

-Second, rather than changing the display value of the nested elements, you might be tempted to replace the <summary> element’s default display: list-item value with display: flex. At least I was! However, if we do this, the arrow marker will disappear. Whoops!


╵𒄉〢・ᴍʏ sᴛᴀᴛS! 👀


Commit Stats


Unfortunately, I am new to all this, and as far as I remember you can't use CSS on Github or something like that and I don't know how to add the CSS code to make everything work fine. Do message if you get the answer.

@flakrat
Copy link

flakrat commented Jan 26, 2022

Whoop, thanks for posting this. Makes for a much more readable document when including lengthy output sections (like tracebacks, etc...)

@splaisan
Copy link

splaisan commented Feb 8, 2022

wonderful, I was looking for this for a long time.
THANKS

@jacobmoroni
Copy link

jacobmoroni commented Feb 21, 2022

I saw @antranapp's comment and figured out how to do it. here it is

<details open>

  <summary>click to collapse</summary>

  this one starts expanded because of the "open"

</details>
click to collapse

this one starts expanded because of the "open"

@akcasasent
Copy link

Is there a way to have this work with links without having to write the htlm directrly?

@darshan315
Copy link

@akcasasent

For mentioning links in Markdown, refer to this.

you can also use that in the collapsable section.

Click-Here

youtube

@iamramahibrah
Copy link

Check this out this is toggle list

@TukangM
Copy link

TukangM commented Sep 22, 2022

HHH

TESST

@oh-satyo-iswara
Copy link

hello world

@Laura-Novich-OBW
Copy link

Any advice on how to get it to work in GitHub Pages? In GitHub it looks beautiful.
on the rendered page, much less so.

@OliverEvans96
Copy link

@Laura-Novich-OBW - you probably want to check out the CSS sections of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

@abzrg
Copy link

abzrg commented Nov 21, 2022

$\color{darkgray}\text{Unit}_{\Large1}$

$\textit{\large 1. }\textbf{\color{lightyellow}abroad}$ ( $\textit{\color{darkgray}adv}$ )

  • $\textit{\color{lightblue}I would love to go abroad this year, perhaps to South of France.}$
  • $\textit{\color{lightcyan}...public opposition here and abroad...}$
  • $\textit{\color{lightblue}About 65 per cent of its sales come from abroad.}$
  • Definition

    in or to a foreign country. (= overseas)

$\textit{\large 2. }\textbf{\color{lightyellow}accustomed to}$ ( $\textit{\color{darkgray}adj}$ )

  • $\textit{\color{lightblue}I was accustomed to being the only child at a table full of adults...}$
  • $\textit{\color{lightcyan}We were accustomed to working together.}$
  • $\textit{\color{lightblue}Her eyes quickly became accustomed to the dark.}$
  • Definition

    If you are accustomed to something, you know it so well or have experienced it so often that it seems natural, unsurprising, or easy to deal with.

@mdrahmed
Copy link

mdrahmed commented Jun 9, 2023

click to collapse

this one starts expanded because of the "open"

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