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?

Can't say for sure about Sphinx (did you check their plugins), but MkDocs does not offer such a feature out of the box. You would probably need some sort of JavaScript/CSS solution to manipulate how a codeblock is displayed. Although, you could check third-party-extensions for Markdown. Maybe someone has already built something. — Waylan, Jun 03 '16 at 13:04
Thanks Waylan. I'll keep looking and perhaps someone has built an extesion as you mention. — Grokify, Jun 07 '16 at 05:32
Sphinx-tabs seems your solution for Sphinx https://github.com/djungelorm/sphinx-tabs — steinam, Apr 20 '18 at 20:50

score 2 · Answer 1 · edited Sep 25 '17 at 06:47

2

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

Example from their documentation:

edited Sep 25 '17 at 06:47

Nick Volynkin

14,023
6
43
67

answered Oct 28 '16 at 13:25

Paebbels

15,573
13
70
139

score 1 · Answer 2 · answered Mar 02 '17 at 10:59

1

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

answered Mar 02 '17 at 10:59

Yassir

80
5

It is possible to use "markdown-fenced-code-tabs" in a Sphinx project (using markdown content via the m2r2 extension)? – Martin Thøgersen Sep 09 '20 at 07:42

score 1 · Answer 3 · answered Apr 04 '17 at 09:17

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.

score 1 · Answer 4 · answered Nov 06 '19 at 15:13

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

score 1 · Answer 5 · answered Dec 01 '20 at 14:41

For mkdocs you have the pymdownx.tabbed extension.

You would have to declare it in your mkdocs.yaml file:

markdown_extensions:
  - pymdownx.tabbed

Then the syntax in your markdown file would be [taken from the documentation]:

=== "Tab 1"
    Markdown **content**.

    Multiple paragraphs.

=== "Tab 2"
    More Markdown **content**.

    - list item a
    - list item b

It is guaranteed to work well with the material theme (see the page with examples). For other themes, you would have to try it for yourself.

How to Create Tabbed Code Blocks in Mkdocs or Sphinx?

5 Answers5