Skip to content

Instantly share code, notes, and snippets.

@ericclemmons
Last active September 20, 2024 12:46
Show Gist options
  • Save ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d to your computer and use it in GitHub Desktop.
Save ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d to your computer and use it in GitHub Desktop.
HTML5 <details> in GitHub

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 <summary>Summary Goes Here</summary>
 ...this is hidden, collapsable content...
</details>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

A collapsible section with markdown

Click to expand!
def func():
    return 'hello, world!'

Nested

root
bin
nest1
a
b
c
nest2

a b c

file1
file2
file3
boot

x y z

dev

p q r

etc

e t c

home

me you everyone

lib

lib er ate

@AntonisPapasavva
Copy link

AntonisPapasavva commented May 4, 2021

I have a problem on my website with this.
Normal text on my website is smaller than the text within the details. So, the text within "details" looks like 2+ pt bigger than the rest of the text on my site.
Does anyone know why? How can I fix this?

@Mwea
Copy link

Mwea commented Jun 10, 2021

test

+ pp[p
- oo[o

@BR0kEN-
Copy link

BR0kEN- commented Jul 19, 2021

Configuration example
{"a": "b"}

@rubek-joshi
Copy link

Can you use md markup for linking inside the <summary/> tag? It seems to work inside the <details/> tag.

@phanirithvij
Copy link

phanirithvij commented Apr 23, 2022

@rubek-joshi It is possible but there is a catch, it can't be markdown formatting because a new line is required for markdown parsers to parse and render them.

So this is possible

Some bold text code.go link
func main() {}

But not with markdown but with HTML tags

<details><summary><s>Some</s> <b>bold</b> <i>text</i> <code>code.go</code> <a href="//example.com">link</a></summary>

    ```go
    func main() {}
    ```
</details>

can use markdown if you don't mind a newline in your summary link

interface{}

i.e.

<details><summary>

can use *markdown* ~if~ you don't mind a `newline` in _your_ summary [link](//example.com) </summary>
    ```go
    interface{}
    ```
</details>
You can go even crazier and have a multiline image, stack trace, etc. in the summary

hek

slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
... show more
slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
temple (0.7.7) lib/temple/engine.rb:50:in call' temple (0.7.7) lib/temple/mixins/template.rb:10:incompile'
temple (0.7.7) lib/temple/templates/tilt.rb:30:in prepare' tilt (2.0.5) lib/tilt/template.rb:92:ininitialize'
sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:in new' sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/bundle.rb:23:inblock in call'
sprockets (3.6.2) lib/sprockets/utils.rb:196:in dfs' sprockets (3.6.2) lib/sprockets/bundle.rb:24:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/base.rb:66:infind_asset'

Like this

<details>
<summary>

![hek](https://picsum.photos/40/40)
    ```ruby
    slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
    slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
    slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
    temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
    ... show more
    ```
</summary>
...
</details>

@TomasMiskov
Copy link

TomasMiskov commented May 27, 2022

Is it possible to include (Python) code inside summary and serve it on a Jekyll site such that it holds onto the same formatting as a chunk of code that's not inside the summary tag?

So far I either get no formatting at all, or when using pre tag inside summary I get some default formatting but not the one of my style.

@pastgonex
Copy link

test ...this is hidden,collapsable content...

@jessebot
Copy link

jessebot commented Oct 23, 2022

@TomasMiskov yes, but I had to do some digging to find what to do. It required a modification to _config.yml:

markdown: CommonMarkGhPages
commonmark:
  options: ["UNSAFE", "SMART", "FOOTNOTES"]
  extensions: ["strikethrough", "autolink", "table", "tagfilter"]

Which is in the docs by github here.

After I pushed up the above, I was able to do this in github.io pages and *.github.com:

Python3.10

Check out this bash syntax highlighted block:

  brew install python@3.10
  <details>
    <summary>Python3.10</summary>

    Below, you can change the first ``` to ```bash for syntax highlighting :)
    Checkout this regular code block:

    ```
    brew install python@3.10
    ```

  </details>

Here's an example of it working in jekyll.

@TomasMiskov
Copy link

TomasMiskov commented Oct 23, 2022

Thanks @jessebot! In the end, I solved it by encapsulating the code in the Jekyll liquid tag like this:

{% highlight python %}

some code

{% endhighlight %}

More info here.

@jessebot
Copy link

No problem! Also, thanks for the info on the highlight syntax for Jekyll! :)

Were you able to get that to work on github.com as well? I couldn't find a way that didn't show the {% highlight python %} start and end tag in the code block, but I'm relatively new to Jekyll.

@MarcosYonamine963
Copy link

Nested details:

Code:

  * <details><summary>1 <a href="#cap1"> 1- Introduction</a></summary><ul>
     <li><details><summary> 1.1 <a href="cap1_1"> Second Level 1 </a> </summary> <ul> 
           <li>1.1.1 <a href="cap1_1_1"> Third 1a </a> </li>
           <li>1.1.2 <a href="cap1_1_2"> Third 2a</a> </li>
           <li>1.1.3 <a href="cap1_1_3"> Third 3a</a> </li>
     </ul></details></li> <!-- End 1 -->
     <li><details><summary> 1.2 <a href="cap1_2"> Second Level 2 </a> </summary> <ul> 
           <li>1.2.1 <a href="cap1_2_1"> Third 1b</a> </li>
           <li>1.2.2 <a href="cap1_2_1"> Third 2b</a> </li>
           <li>1.2.3 <a href="cap1_2_1"> Third 3b</a> </li>
     </ul></details></li> <!-- End  2-->
     <li>1.5 <a href="cap1_5"> Alone 1</a> </li>
     <li>1.6 <a href="cap1_6"> Alone 2</a> </li>
   </ul> <!-- End -->
  </details>

@Muaath5
Copy link

Muaath5 commented Dec 23, 2023

Level 1
Level 2
Level 3
Last Level
#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}
Level 1
Level 2
Level 3
Last Level
#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}
Level 1
Level 2
Level 3
Last Level
#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}
Level 1
Level 2
Level 3
Last Level
#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}
Level 1
Level 2
Level 3
Last Level
#include <bits/stdc++.h>
int main() {
    cout << "Hello World";
}

@eggplants
Copy link

Does anyone know how to use an image as a summary of details element?

@eggplants
Copy link

eggplants commented Jan 1, 2024

On click of image, I want to expand.


image

foo bar

@sonalk-ux
Copy link

😩

@DerGoogler
Copy link

DerGoogler commented Sep 20, 2024

Summary Goes Here

...this is hidden, collapsable content...

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