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

@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 [email protected]

  <details>
    <summary>Python3.10</summary>

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

    ```
    brew install [email protected]
    ```

  </details>

Here's an example of it working in jekyll.

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.

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