Show dropdown area / expandable area with code in markdown file

Question

I am trying to have a dropdown in readme.md file and show code in that expandable area.

For md files I have seen people using ``` which worked for me.

Below links were useful in showing tabular data using md files and lots of other stuff:-

1. https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

2. https://github.com/tchapi/markdown-cheatsheet/blob/master/README.md

For showing a dropdown I found that using details tag with summary works:-

Collapsible header in Markdown to html

I am trying to update the md file and have some code shown in

<details>
  <summary><h1 style="display:inline-block"> Advanced Topics </h1></summary>
    ```

    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      template: `<nav>
                  <a routerLink="/signin" routerLinkActive="active">SignIn</a>
                  <a routerLink="/signup" routerLinkActive="active">SignUp</a>
                </nav>  
                <router-outlet></router-outlet>`,
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      
    }


    ```
</details>

But I have been unsuccessful till now.

How can I show formatted/highlighted code like when I use ``` but inside the details tags ?

Any help would be appreciated.

Answer 1

The solution

The solution for this problem is the 'run code snippet'

<script src="https://gist.github.com/nicolasalarconrapela/91d36921ab168401f88050929aeab1be.js">
</script>