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:

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>

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

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

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>

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.

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!