CODEWITHSUNDEEP
markdownpython-sphinxmkdocs
Grokify
Grokify

Reputation: 16354

How to Create Tabbed Code Blocks in Mkdocs or Sphinx?

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

enter image description here

Upvotes: 9

Views: 7668

Answers (5)

fralau
fralau

Reputation: 3839

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.

Upvotes: 2

ojacques
ojacques

Reputation: 101

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.

CodeHilite example

In addition, CodeHilite provides:

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

Upvotes: 1

Paebbels
Paebbels

Reputation: 16249

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

Example from their documentation: f

Upvotes: 2

cedric gestes
cedric gestes

Reputation: 11

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.

Upvotes: 1

Yassir
Yassir

Reputation: 80

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

enter image description here

Upvotes: 1

Related Questions