Skip to content

Instantly share code, notes, and snippets.

@ericclemmons
Last active March 24, 2023 06:12
Embed
What would you like to do?
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

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

@upupqi
Copy link

upupqi commented Aug 16, 2022

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.

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