@mirrordown/remd-tabs

Part of Mirrordown — a suite of markdown syntax extensions for the unified and markdown-it ecosystems.

A remark/rehype (unified) plugin for the tabs syntax extension.

Overview

The tabs plugin converts %-prefixed headers and >-prefixed blockquote bodies into CSS-only tab groups. Tabs use hidden radio inputs for state — no JavaScript required.

<div class="markdown-tabs" data-tabs-group="...">
  <div class="markdown-tabs-labels">...</div>
  <div class="markdown-tabs-panels">...</div>
</div>

Syntax

Write a % Label line followed by a > blockquote for each tab's content:

% JavaScript

> ```js
> console.log("Hello, world!");
> ```
>
> % TypeScript
>
> ```ts
> const greeting: string = "Hello, world!";
> console.log(greeting);
> ```
>
> % Python
>
> ```py
> print("Hello, world!")
> ```

Default open tab

Mark a tab with %+ to make it open by default (the first tab is open by default otherwise):

% Option A

> This tab is not selected by default.
> %+ Option B
> This tab opens by default.
> % Option C
> This tab is not selected by default.

Nested tabs

Use %% for a second level of nesting inside a tab:

% Frontend
%% React

> ```tsx
> export function App() {
>   return <h1>Hello</h1>;
> }
> ```
>
> %% Vue
>
> ```vue
> <template><h1>Hello</h1></template>
> ```
>
> % Backend
> Node.js or any server runtime.

Install

Install @mirrordown/remd-tabs. You must also pass tabsHastHandlers to remarkRehype and import the stylesheet:

npm install @mirrordown/remd-tabs

Unified

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";
import { remarkTabs, tabsHastHandlers } from "@mirrordown/remd-tabs";
import "@mirrordown/remd-tabs/tabs.css";

const processor = unified()
  .use(remarkParse)
  .use(remarkTabs)
  .use(remarkRehype, { handlers: tabsHastHandlers })
  .use(rehypeStringify);

Astro

// astro.config.ts
import { defineConfig } from "astro/config";
import { remarkTabs, tabsHastHandlers } from "@mirrordown/remd-tabs";
import "@mirrordown/remd-tabs/tabs.css";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkTabs],
    remarkRehype: { handlers: tabsHastHandlers }
  }
});

VitePress

// .vitepress/config.ts
import { defineConfig } from "vitepress";
import { remarkTabs, tabsHastHandlers } from "@mirrordown/remd-tabs";
import "@mirrordown/remd-tabs/tabs.css";

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkTabs],
    remarkRehype: { handlers: tabsHastHandlers }
  }
});

Documentation

Full documentation, more examples, and configuration options: github.com/mirrordown/mirrordown (dedicated docs site coming soon).

License

MIT © Drake Costa