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).

This can be useful in many situations. For example, when there is variations of the same code for multiple languages or for code snippets that usually accompany each other (like HTML, CSS, JS).

Even for a regular code snippet, being able to show the tab can be useful. The tab name will indicate the file name or the language/syntax of the code (so there will be no need to insert, for example, App.js: before the snippet or // App.js as the first line of the code snippet).

One other benefit is that it compacts the documentations and makes it smaller vertically.

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 build scripts
• Bash/Zsh/PowerShell commands
• 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
• Related code/files where their content should be edited together

Real-world example 1

Gradle build tool (used in Java, Kotlin, Android, etc.) has two syntax for its build files. Many libraries need to provide both of those syntaxes in their README file on GitHub. Here is an example from Gradle site itself:

Gradle Groovy DSL syntax	Gradle Kotlin DSL syntax

Real-world example 2

Java and Kotlin are two languages which are mostly interoperable (they can be mixed in a single project with no effort). Platforms like Android and big libraries like Spring provide their code examples in these two languages. Similarly, there are many Java/Kotlin libraries that provide usage for both of these languages in their markdown docs. Here are Spring and Android websites:

Website	Java code	Kotlin code
Spring
Android developers

Real-world example 3

HTML, CSS, and JavaScript are a triple that may come together a lot in documentations. So, this would be another use case for this feature.

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.

[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

[carlosperales95]

++ this would be amazing

[a17]

++

[pa-0]

For what's it's worth (and I realize this is not exactly a direct solution to your request), but if you want to implement this feature in your own docs / GitHub Pages, PyMDown (built on Python) offers this functionality through supported extensions like Tabbed, which is pretty much exactly what you are describing here:

(This is just one of many different options offered by the extensions.)

[teras]

This is one more "me too" comments...

[tonilopezmr]

+1 This would be awesome!

[reanimatedmanx]

May 27, 2022
Sep 21, 2024

@github what are you doing there?

[bckohan]

This seems like its in the perfect space of not hard and super useful. I would use it immediately to make a number of readmes more readable.

[bkkflynnsta]

+1 - really should not have to request this...

Disappointed along with all my fellow developers, but here's an ugly hack/ workaround that might bridge the gap for some until this table stakes item is delivered (if ever...)

You might be able to get by with the currently-available <details> ... </details> blocks, for example:

<details>
  <summary>NodeJS example</summary>
  *some NodeJS code here...*
</details>

<details>
  <summary>RoR example</summary>
  *some Ruby on Rails code here...*
</details>

Which would produce:

NodeJS example

*some NodeJS code here...*

RoR example

*some Ruby on Rails code here...*

[zspitz]

To get syntax highlighting within the body of the <details>, you need blank lines between the <summary> element and the closing </details>:

<details>
  <summary>NodeJS example</summary>

  ```js
  console.log('Hello');
  ```

</details>

<details>
  <summary>RoR example</summary>

  ```rb
  puts "Hello World"
  ```

</details>

NodeJS example

console.log('Hello');

RoR example

puts "Hello World"

[Tony-xy-Liu]

+1 Wanted this feature to descibe OS specific install instructions

[marc-christian-schulze]

+1

[robertdumitrescu]

+1