⌘ K
Docusaurus · MkDocs · Starlight

Build Markdown tab blocks

Tabbed content compatible with Docusaurus Tabs, MkDocs Material content-tabs, and Starlight TabItem. Add as many tabs as you need.

Tabs Generator
Markdown
179 B
16 lines
Flavor
docusaurus
renderer
Tabs
2
defined
First tab
JavaScript
default open
input · tabs
output · markdown
<Tabs>
<TabItem value="js" label="JavaScript" default>

```js
console.log('hi');
```

</TabItem>
<TabItem value="py" label="Python">

```python
print('hi')
```

</TabItem>
</Tabs>
Quick Start

How to add tabbed content

Pick a flavor first — the syntax differs by renderer. The first tab is the default in Docusaurus and MkDocs.

  1. 01

    Pick a flavor

    Docusaurus uses JSX components, MkDocs uses === markers, Starlight uses TabItem.

    Parsing runs through marked with GFM extensions enabled — tables, task lists, strikethrough, and fenced code blocks all match GitHub’s rendering.

    flavorGFMmarkedCommonMarklive
    flavor · markdowndocusaurus · GFM
    <Tabs> …
    loaded · GFMGFM · ready
  2. 02

    Define tabs

    Each tab has a label (shown), value (internal id), and Markdown content.

    Soft-break behaviour is configurable: by default a single newline becomes a space (CommonMark), toggle on for chat-style <br> insertion.

    tabssoft-breaksoptionsconfiglive
    tabs · options2 · live
    label · value · md
    options applied · livelive
  3. 03

    First is default

    The first tab opens by default in Docusaurus; in MkDocs, it's just first in the list.

    The preview is scoped under a .mde class so its CSS doesn’t bleed into the rest of the page. Output HTML is whitespace-controlled for clean diffs.

    defaultpreviewscoped CSSrenderstable
    first · renderedJavaScript · ready
    default open
    rendered · liverendered
  4. 04

    Copy and paste

    Drop into your .md / .mdx page. Make sure the renderer plugin is enabled.

    Export covers both raw Markdown and rendered HTML; downloads stream as text/markdown or text/html via Blob + object URL.

    exportclipboard.md.htmlblob
    ✓ · exportedready · done
    ✓ Copied
    shipped · ready to shipsuccess
Pro tips

Author Markdown that renders everywhere

GFM is the safe default

GitHub-Flavored Markdown is the de-facto baseline (tables, task lists, strikethrough). CommonMark is stricter but ubiquitous as a fallback.

Soft-break behaviour varies

A single newline is a space in CommonMark, a <br> in GFM. Toggle soft breaks when source matters.

Escape inside code fences

Backticks inside fenced blocks need a longer fence — three becomes four. Use ~~~ if your content has many backticks.

Anchors are slugified

GitHub lowercases, strips punctuation, and joins with hyphens. Duplicate headings get -1, -2 suffixes.

Tables need a header row

The dash row sets alignment (:---, :-:, ---:). Use Table Aligner for diff-friendly columns.

Front matter is YAML

Triple-dash blocks at the top of files are parsed by static-site generators. Use the Front-Matter Validator to catch syntax errors.

Related toolsCalloutsCollapsiblesMD EditorCheatsheetREADMETables
Use Cases

Where tabs help

Multi-language docs, multi-OS instructions.

Install commands

npm / yarn / pnpm side-by-side without scrolling. Render path uses marked with GFM extensions enabled (tables, task lists, strikethrough, autolinks), so what you preview matches what GitHub publishes bit-for-bit. Soft-break behaviour is configurable for chat-style vs prose Markdown.

GFM-compliant

Multi-language

Same example in JS, Python, Go, Rust. Pairs cleanly with the Markdown Cheatsheet for syntax you can't quite remember — callout blocks, footnotes, definition lists. Output stays diff-friendly so style-only changes don't drown out real edits in PRs.

GitHub-perfect

Multi-OS setup

Windows / macOS / Linux setup steps. Cross-platform safe: anchors, code fences, and tables behave identically on GitHub, GitLab, Bitbucket, and Gitea. Heading-anchor slugs follow GitHub's lowercase-and-hyphenate rules so deep links survive a docs migration.

diff-friendly

SDK comparisons

REST vs WebSocket vs SDK calls. No server roundtrip — perfect for proprietary content you can't paste into a public tool. The full marked + GFM bundle ships with the page, so it works offline once loaded.

render-stable

Theme variants

Light vs dark CSS examples. Front matter (YAML / TOML / JSON) passes through unchanged so static-site pipelines (Jekyll, Hugo, Astro, Eleventy) read it correctly. Pair with the Front-Matter Validator to catch syntax errors before deploy.

cross-platform

Bundler configs

Vite / Webpack / Rollup config snippets. Output is reproducible: identical input always produces identical Markdown, so doc-generation scripts can rely on it for snapshot tests and embedded into release workflows.

SEO-friendly
FAQ

Frequently asked questions

No — GitHub Markdown doesn't support tabs. Tabs are a static-site renderer feature.
Docusaurus uses MDX, so JSX components work directly inside Markdown.
Yes — content under === must be indented by 4 spaces. The tool emits this for you.
In Docusaurus, the tool sets default on the first tab. In MkDocs, the first listed tab is initially shown.
No. Tabs are built locally.
Suggest a tool

Something missing?

Tell us what you need. We ship the top requests every two weeks.

Sent straight to the maintainers · no account needed
47 in queue·8 shipped this month
Request queued. Thanks!