DEV Community

Retiago Drago
Retiago Drago

Posted on

3

Collapsible Markdown on GitHub Markdown and Beacons AI

Welcome to Technically Speaking, a series that will serve as the hub for my latest technical escapades. The focus here is strictly technicalโ€”covering everything from code snippets to full-blown projects. Consider this my daily commitment to better coding habits and creative building!

Today, let's dive into how to create collapsible markdown sections on GitHub and Beacons AI. The notion struck me after stumbling upon a gist by pierrejoubert73. Here's what sparked the idea:

How to add a collapsible section in markdown

1. Example

Click me

Heading

  1. Foo
  2. Bar
    • Baz
    • Qux

Some Javascript

function logSomething(something) {
  console.log('Something', something);
}

2. Code/Markdown

<details>
  <summary>Click me</summary>
  
  ### Heading
  1. Foo
  2. Bar
     * Baz
     * Qux

  ### Some Javascript
  ```js
  function logSomething(something) {
    console.log('Something', something);
  }
  ```
</details>

3. Tips & Tricks

3.1 Expand by Default

To have a collapsible section expanded by default, simply include the 'open' attribute within the <details> tag:

Hello World!
<details open>
  <summary>Hello</summary>
  World!
</details>

3.2 Customize Clickable Text

You can modify the appearance of the clickable text by adding styling inside the <summary> tags:

Wow, so fancy WOW, SO BOLD
<details>
  <summary><i>Wow, so fancy</i></summary>
  <b>WOW, SO BOLD</b>
</details>

3.3 Nested Collapsible Sections

NB: When including headings within collapsible sections, remember to add a new line after the <summary> tag.

Section A
Section A.B
Section A.B.C
Section A.B.C.D Done!
<details>
<summary>Section A</summary>
<details>
<summary>Section A.B</summary>
<details>
<summary>Section A.B.C</summary>
<details>
<summary>Section A.B.C.D</summary>
  Done!
</details>
</details>
</details>
</details>

Troubleshooting

  • If certain markdown or styling, such as # My Title, fails to render in the collapsible section, try adding a line break after the </summary> tag.
  • If your section fails to render, it might be malformed. Consider copying the functional examples provided here and building from there!

Beacons AI: The About Me Section

My first playground was my Beacons AI 'About Me' section, where markdown formatting is welcomed. Check out the markdown code I used:



<center>
<details>
<summary>
๐Ÿ‘‰๐Ÿ‘ˆ
</summary>

### Oh, hello there! ๐Ÿ‘‹

|  | I'm a / an |
| :--- | :---: |
| Programmer | โœ” |
| AI Tech Writer | โœ” |
| Data Practitioner | โœ” |
| Statistics & Math Addict | โœ” |
| Open Source Contributor | โœ” |
| Quantum Computing Enthusiast | โœ” |
</details>
</center>


Enter fullscreen mode Exit fullscreen mode

Curious to see it in action? The code renders as shown below. Feel free to explore and experiment on my Beacons AI page.

beacons ai

A word of caution: this could impact your SEO preview, as evidenced by this Telegram snapshot.

telegram views

GitHub: README Section

Next, I integrated collapsible markdown into my GitHub README. Here's a snippet:



<details>
<summary>
With <strong>me</strong>
</summary>
<center>

|  | I'm a / an |
| :--- | :---: |
| Programmer | โœ” |
| AI Tech Writer | โœ” |
| Data Practitioner | โœ” |
| Statistics & Math Addict | โœ” |
| Open Source Contributor | โœ” |
| Quantum Computing Enthusiast | โœ” |
</center>
</details>

<details>
<summary>
I <strong>code</strong> in the dark of my room ๐Ÿ‘จโ€๐Ÿ’ป
</summary>
<div align="right">

And I predict my data, **forecasting** from afar (oh)  
"**Unittest**," but it's not just a few  
**Data analysis** keeps me on cue
</div>
</details>

<details>
<summary>
And I <strong>study now</strong>, the current state ๐Ÿ’ป
</summary>
<div align="right">

Of **Rust** and **Julia** to seal my fate (oh)  
And in **Python**, I find my worth  
"**SQL**", ain't that the geekiest you ever heard?  
I write those, grinding like a coder
</div>
</details>


Enter fullscreen mode Exit fullscreen mode

It's worth noting that the center tag doesn't yield the same results on GitHub as it does on Beacons AI. To see how it renders, visit my GitHub profile.

github

And that wraps up today's episode of Technically Speaking. Collapsible markdown is more than just a neat trick; it's a way to make your pages more interactive and engaging. So go ahead, give it a whirl, and let me know how it works for you!

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where youโ€™ll build it, break it, debug it, and fix it. Youโ€™ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good olโ€™ AI to find and fix issues fast.

RSVP here โ†’

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay