Code Tabs

:::code-group ディレクティブを <CodeGroup> コンポーネント経由でタブ付きコードパネルとして描画します。

codeTabs 機能は、関連するコードブロックをインタラクティブなタブストリップにまとめます。連続するフェンスブロックを :::code-group ディレクティブでラップすると、zfb がフレームワーク側でタブとして描画する <CodeGroup> 要素を出力します。

設定

export default defineConfig({
  markdown: {
    features: {
      codeTabs: true,
    },
  },
});

記述構文

2 つ以上のフェンスコードブロックを :::code-group ディレクティブでラップします。各ブロックのタブラベルは、その title="…" 属性から導出されます。

:::code-group

```ts title="index.ts"
export const greeting: string = "hello";
```

```js title="index.js"
export const greeting = "hello";
```

:::

タブラベルの解決

各タブのラベルは次の優先順位で決定されます。

1. フェンスの title="…" 属性

2. 言語 id（例: ts、js）

3. いずれもない場合のフォールバック文字列 "tab"

ライブデモ

上記のディレクティブは次のように描画されます。

export const greeting: string = "hello";

export const greeting = "hello";

出力

:::code-group ディレクティブは、解決されたラベル配列を保持する tabs プロパティと、フェンスごとに 1 つの <pre data-lang="…"> 子要素を持つ <CodeGroup> JSX 要素を生成します。

<CodeGroup tabs={["index.ts", "index.js"]}>
  <pre data-lang="ts">export const greeting: string = "hello";</pre>
  <pre data-lang="js">export const greeting = "hello";</pre>
</CodeGroup>

フレームワークは <CodeGroup> を同梱していません — zudo-doc は pages/_mdx-components.ts で独自の実装を登録し、tabs 配列と <pre data-lang> の子要素を既存の <Tabs> / <TabItem> UI にマッピングします。各 <pre> 内のコードは生のテキストです（Rust パイプラインは :::code-group フェンス内でシンタックスハイライトを実行しません）。

name によるタブの同期

オプションの name 属性を使うと、同じページ内で同じ名前を持つすべての :::code-group ブロックが連動します。一方のグループでタブをクリックすると、同じ名前を持つほかのグループも — 対応するラベルのタブが存在する場合に — 自動的に切り替わります。

:::code-group{name="package-manager"}

```sh title="npm"
npm install my-lib
```

```sh title="pnpm"
pnpm add my-lib
```

:::

:::code-group{name="package-manager"}

```sh title="npm"
npm run dev
```

```sh title="pnpm"
pnpm dev
```

:::

選択したタブは localStorage の tabs-group-{name} というキーにも保存されます。次回のページ読み込み時、同じ名前を持つすべてのグループが保存済みのタブを復元します（保存されたラベルがグループに存在しない場合はデフォルトのタブにフォールバックします）。

内部的には、name は zfb によって <CodeGroup> コンポーネントへの prop として転送され、<CodeGroup> はそれを下層の <Tabs> コンポーネントの groupId として渡します。TabsInit スクリプトはレンダリングされた DOM の data-group-id を読み取り、クリック時に同じ groupId を持つすべてのコンテナを同期しながら、localStorage への読み書きによってページをまたいだ永続化を行います。

補足

• 空の :::code-group コンテナ（フェンスなし）は、プレーンテキストのまま変更されません。

• ネストした :::code-group ディレクティブはサポートされていません。