Chris'
Full
Stack
Blog.


  +00
0


Give me some gold stars if you like this post - max 50 :)
Was this idea totally stolen from Medium? Nooooooo :)

Dropdowns in Markdown README's!

December 22, 2017

#dev

HTML in Markdown!?

Well, it’s a little known fact (at least it was for me) that you can use native HTML tags are supported in Markdown, though the support over different sites is varying. I would say the code presented here should work on about 99% of pages - let me know if that’s not the case

Code

To get this to work in most environments1 all we have to do is to make use of the <details> tag. Since you probably want your dropdown to have a title, we also need to use the <summary> tag. So a cool markdown dropdown could look as simple as this:

<details><summary>Cool Dropdown</summary><br>
blah blah blah blah you found me!
</details>

Or, rendered (go on and give the arrow a click!):

Cool Dropdown
blah blah blah blah you found me!

Of course, all goodies of markdown will work inside of this dropdown - lists, links, etc.

Longer Example

Here’s a bigger example for your copypasta pleasure:

<p>
<details><summary>Cool Dropdown #1</summary><br>

```js
// so wow, much amazing... you can even put code in these drop downs!
document.getElementById('root')
```s

[Or a link - like to google](https://google.com)

- Or a List
  - or a nested List
  - like this
  - with 😄 emojis
- Like this

Or even just normal text

</details>

<details><summary>Cool Dropdown #2</summary><br>

More cool text hiding in my dropdown

</details>

<details><summary>Cool Dropdown #3</summary><br>

Easter egg! 🥚🥚🥚

</details>
</p>

Rendered on this page, that snippet looks like this:

Cool Dropdown #1
// so wow, much amazing... you can even put code in these drop downs!
document.getElementById('root')

Or a link - like to google

  • Or a List

    • or a nested List
    • like this
    • with 😄 emojis
  • Like this

Or even just normal text

Cool Dropdown #2

More cool text hiding in my dropdown

Cool Dropdown #3

Easter egg! 🥚🥚🥚

```

Most Important - Use It!

I for one am going to start using this in my README’s. After all, it is the first page a lot of developers and users see, so using these dropdowns would be a nice simple way to keep your README uncluttered and organized - the communitiy at large will benefit and thank you for piece-wise docs.


Footnotes

  1. This page you are looking at right now is generated with Gatsby (which generates React HTML from markdown), and I know these dropdowns work on the Markdown of GitHub too.

Previous Post: Debugging ABAP Code with a SAP Shortcut - A Must-Have Tool!

Next Post: All Time Blog Donations Flowchart