Docs

Tabs

Grouping alternative versions of content, and keeping groups in step

Tabs group alternative versions of the same content – typically one snippet in several languages. The reader sees one tab at a time and switches with a click or the arrow keys.

Result
Python
print("hello")
Julia
println("hello")
Markdown
:::::tabs
::::tab{name="Python"}
```python
print("hello")
```
::::
::::tab{name="Julia"}
```julia
println("hello")
```
::::
:::::

Structure

  • The outer :::::tabs (five colons) wraps the group; each ::::tab (four colons) is one alternative, with its label in {name="..."}.
  • The colon counts follow the nesting rule: outer deeper than inner.
  • A tab body is full Markdown – prose, maths, code, other blocks.

Groups that switch together

Give several tab groups the same group name, and choosing a tab in one switches every group with that name to the tab of the same label. The choice is remembered in the reader's browser, so the next document with that group opens on it too.

Result
Python
xs = [1, 2, 3]
Julia
xs = [1, 2, 3]

Then, further down the same page:

Python
print(sum(xs))
Julia
println(sum(xs))
Markdown
:::::tabs{group="lang"}
::::tab{name="Python"}
```python
xs = [1, 2, 3]
```
::::
::::tab{name="Julia"}
```julia
xs = [1, 2, 3]
```
::::
:::::
 
Then, further down the same page:
 
:::::tabs{group="lang"}
::::tab{name="Python"}
```python
print(sum(xs))
```
::::
::::tab{name="Julia"}
```julia
println(sum(xs))
```
::::
:::::

A group name is letters, digits, - and _, up to 40 characters. Anything else is ignored and the group switches on its own.

Without a click

Every tab is part of the page. Printed, or read where scripts do not run, the tabs appear one under another, each under its label, so nothing in them is lost.