Add tabbed code snippets in markdown

[mahozad]

In addition to current behavior, please add ability to show code snippets in tabs (even a single tab; see number 4 below for why).

Tabs can be useful in at least the following ways:

1. Varying the same code/instructions for different tools, languages, or environments
2. Grouping code snippets that usually accompany each other (like HTML, CSS, JavaScript)
3. Compacting the documentation and occupying less height (this is an indirect result of tabs)
4. Labeling the intended file name or displaying the language/syntax of the code snippet(s)
   ^{(for example, instead of inserting App.js: before the snippet or // App.js as the first line of the code)}

Here are many, many real-world examples in which tabbed code snippets may be helpful:

• JavaScript/TypeScript code snippets
• XML/JSON output examples
• Java/Kotlin code snippets
• View/Compose code for Android widgets
• Swift/Objective-C code snippets
• TOML/YAML/PROPERTIES/INI config formats
• Yarn/npm commands for installing a package
• Node.js/Deno/Bun commands or setups or helps
• Maven/Gradle/Ant dependency declaration for JVM languages
• Kotlin/Groovy DSL for Gradle build scripts
• Bash/Zsh/PowerShell commands or settings
• Linux/macOS/Windows installation guides or commands or paths
• Before/After or diff for changes in content
• HTML/CSS/JavaScript for a component or an example
• SQLite/MySQL/PostgreSQL/... setup or dialects for a relational query
• latest/v3/v2/v1.7/etc. code samples or notes or commands for a library or app
• Recommended (good patterns)/Frowned upon (bad anti-patterns) examples of using a code or a library
• Related code/files where their content should be edited together
• ...

Related Stack Overflow posts

• Is it possible to have tabpanel in Markdown?
• Navigation tab in Markdown
• Markdown tabs in GitLab Markdown
• How to add several tabs in markdown?

[ghost]

Hi mahozad!

I found a request similar to the one you are requesting here: Add a tabs in the Markdown in profile the of GitHub #14964 and here Add markdown support for tabs #1552. I hope to help in some way.

The difference from one topic to another is just the purpose. In the first topic, it would be the tabs as a menu that the user defines in the repository. In the second case, the tabs would be code guides within the repository to be used. In short, they are two requests for different purposes but with the same use case that is the guide.

[GingerDas]

The widely-used syntax for this that I have seen in markdown specifically is in R Markdown. The GFM syntax should follow the R Markdown syntax. I would love to see GitHub support tabsets.

[ghost]

great feedback.

[GingerDas]

🎶 "And so they keep on twiddlin' them thumbs" 🎶

[SethAngell]

Wanted to bump this as I'd love to see it implemented in GFM. Reamde.com also has an implementation that feels closer to the OG markdown spec https://docs.readme.com/rdmd/docs/code-blocks

[SKYBITDev3]

Is there any working syntax or workaround?

[numandev1]

is there any chance?

[Investigamer]

I too support this, as it is part of the mkdocs Material spec:
https://squidfunk.github.io/mkdocs-material/reference/content-tabs

[LatentArchitect]

+1 to the list of interested parties on this

[diegomarcuz]

+1 for this feature

[Fludem]

+1 This feature would be nice!

[RanbirK]

+1 for this feature

[bburttram]

+1 for this feature

[shamusx]

+1 for this feature

[Nnamdi-sys]

+1 for this feature

[adsouza]

Looks a lot like github/markup#1552

[LatentArchitect]

+1 for this

[VictorMoni]

+1

[SimonDarksideJ]

+10 million, they are essential in DocFX and should be available on GitHub markdown rendering too

[cbensimon]

+1

[greenmmq]

+1

[MrSinho]

+1 pls

[MatKuhr]

➕1️⃣ for visibility, please make this happen

[Fred-Khan]

+1

[Trance-0]

+1

[garikAsplund]

I vote yay

[rnag]

+1

[telchak]

+1

[theepansains]

+1

[igor-ganov]

+1

[olegdizus]

➕1️⃣

[rishi-raj-jain]

+1