How to Create Tabbed Code Blocks in Mkdocs or Sphinx?

Question

Is there a way to create tabbed code blocks like the following in Mkdocs or Sphinx?

Answer 1

There is sphinxcontrib-osexample, which tries to implement such a feature, but it's very rudimentary!

Example from their documentation:

Answer 2

There is the markdown-fenced-code-tabs extension. I use it with MkDocs.

## Tabs 

```curl
$ curl -O wget http://example.com/pk.zip
```

```wget
$ wget http://example.com/pk.zip
```

## Single block

```
$ ls -lisa
```

Becomes

Answer 3

And also https://github.com/mikecules/MarkdownBSCodeTabs for mkdocs that does the same as markdown-fenced-code-tabs

There is an issue with both of them, if you include multiples code block with the same language, they all will be displayed with the same name, but you wont be able to switch between them.

Furthermore the spark documentation (written in Jekyll) has nice code tabs.

See https://github.com/apache/spark/blob/master/docs/quick-start.md for example.

Answer 4

There is an mkdocs extension -CodeHilite- which leverages another extension -SuperFences- which works wonders for code examples in different languages / situations. This is part of the PyMdown collection of extensions.

In addition, CodeHilite provides:

• Syntax highlighting for more than 300 languages (the one supported by Pygments)
• Line numbering
• Line highlights