On this page

Tabs#

Consecutive code fences that each carry {tab="…"} become one tab set. Without Sumi, they are simply consecutive code blocks with a hint of what each one is for.

```sh {tab="macOS"}
brew install python
```

```sh {tab="Ubuntu"}
sudo apt install python3
```

```powershell {tab="Windows"}
winget install Python.Python.3.12
```

macOS

brew install python

Ubuntu

sudo apt install python3

Windows

winget install Python.Python.3.12

Synchronised tabs#

Tab sets with the same labels stay in sync: choose Windows once and every matching tab set on every page follows. The choice is remembered in the browser.

macOS

python3 -m venv .venv && source .venv/bin/activate

Ubuntu

python3 -m venv .venv && source .venv/bin/activate

Windows

py -m venv .venv; .venv\Scripts\Activate.ps1

Titles inside tabs#

title and tab combine:

```yaml {tab="YAML" title="mkdocs.yml"}
theme: sumi
```

```toml {tab="TOML" title="pyproject.toml"}
[tool.mkdocs]
theme = "sumi"
```

YAML

mkdocs.yml

theme:
  name: sumi

TOML

pyproject.toml

[tool.mkdocs]
theme = "sumi"

Tabs with prose#

For tabs that contain more than code, use pymdownx.tabbed with alternate_style: true. Sumi styles it to match:

mkdocs.yml

markdown_extensions:
  - pymdownx.superfences
  - pymdownx.tabbed:
      alternate_style: true

In print and in the Markdown copy, every tab is shown one after another under its label.