Add tabbed code snippets in markdown

[mahozad]

It would be great if there was a feature to be able to add code snippets with multiple tabs (or even a single tab; read number 4 below).

Tabs can be useful in many ways:

1. Providing variations of the same code/instructions for different tools, languages, or environments
2. For code snippets that usually accompany each other (like HTML, CSS, JavaScript)
3. Compacting the documentation and making it smaller vertically
4. Indicating the file name or the language/syntax of the code(s)
   ^{(instead of inserting, for example, App.js: before the snippet or // App.js as the first line of the code)}

There are many, many examples in which tabbed code snippets may be helpful like:

• Java/Kotlin code snippets
• XML/JSON output examples
• JavaScript/TypeScript 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 packages or helps
• Maven/Gradle/Ant dependency declaration for JVM languages
• Groovy/Kotlin DSL for Gradle build scripts
• Bash/Zsh/PowerShell commands or settings
• Linux/macOS/Windows paths or installation guides or commands
• Before/After or diff for changes in content
• HTML/CSS/JavaScript for a component or example
• SQLite/MySQL/PostgreSQL/... dialects for a relational query
• latest/v3/v2/v1.7/etc. code samples or installation guides/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

[eproulx-bb]

+1

[agilezebra]

Traefik do exactly this with markdown and it can be seen here on their site rendered in tabs:
https://doc.traefik.io/traefik/routing/overview/

It's very clean and effective, as you can see.

If you view the source on GitHub, it falls back very gracefully:
https://github.com/traefik/traefik/blob/master/docs/content/routing/overview.md

Inspection of the raw source shows it's as simple as

```yaml tab="File (YAML)"
entryPoints:
  web:
    # Listen on port 8081 for incoming requests
    address: :8081

providers:
  # Enable the file provider to define routers / middlewares / services in file
  file:
    directory: /path/to/dynamic/conf
.```

The use case, rational and implementation should be obvious from these examples.
I can't for the life of me see why this is in any way controversial or requires 3 years and 40 odd comments of debate to mull it over.

[kzkedzierska]

+1 for this feature

[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