HTML5 <details> in GitHub

example.md

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

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.

Nested details:

• 1 1- Introduction

  • 1.1 Second Level 1

    • 1.1.1 Third 1a
    • 1.1.2 Third 2a
    • 1.1.3 Third 3a
  • 1.2 Second Level 2

    • 1.2.1 Third 1b
    • 1.2.2 Third 2b
    • 1.2.3 Third 3b
  • 1.5 Alone 1
  • 1.6 Alone 2

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>

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";
}

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

On click of image, I want to expand.

---

foo bar

😩

Summary Goes Here

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