基本コンポーネント

ドキュメントページで使用できる標準的なMarkdownおよびMDXタイポグラフィ要素。

zudo-docのデザイントークンシステムによってスタイリングされた、標準的なMarkdownおよびMDX要素です。インポートは不要です。

見出し

h2 から h4 までの見出しは、目次サイドバーに表示されます。

見出し3

見出し4

## 見出し2
### 見出し3
#### 見出し4

コンテンツタイポグラフィの上書き

上記のページタイトル、コンテンツ見出し、プロズ、リンクのタイポグラフィは、コンポーネントトークン — @takazudo/zudo-docパッケージが上書きの接合点として公開している--zdc-*のCSSカスタムプロパティ — によって制御されています。これらのコンポーネントはパッケージから配布されるため（直接編集はできません）、これらのトークンがあなたの作業範囲になります。自分の:rootでいずれかを再定義すれば、すべてのページのコンテンツ領域を再ブランディングできます。!importantもイジェクトも不要です。

:root {
  --zdc-doc-title-font: "Georgia", serif;
  --zdc-doc-title-weight: 800;
}

詳しい解説 — 所有権の逆転という考え方、3層トークン戦略における位置づけ、クロームトークン（カード半径・目次の幅・ナビゲクティブスタイル）、そしてDesign Token Panelで編集できない理由 — はコンポーネントトークンを参照してください。

テキストの書式

太字テキスト、イタリックテキスト、取り消し線。組み合わせも可能です：太字かつイタリック。

**太字テキスト**、*イタリックテキスト*、~~取り消し線~~。
組み合わせも可能です：***太字かつイタリック***。

インラインコード

バッククォートを使って、文中に インラインコード を挿入できます。

バッククォートを使って、文中に `インラインコード` を挿入できます。

コードブロック

フェンスドコードブロックは、zfbのビルド時セマンティッククラスモードでシンタックスハイライトされます。開始バッククォートの後に言語を指定します。詳しくはコードブロックを参照してください。

function greet(name: string): string {
  return `Hello, ${name}!`;
}

```ts

function greet(name: string): string {
  return `Hello, ${name}!`;
}

```

サポートされている言語

zfbのクラスモードハイライターは幅広い言語をサポートしています。代表的なものは以下の通りです：

認識できない言語識別子が指定された場合は、ハイライトされない素のコードブロックとしてレンダリングされます。

箇条書きリスト

• 1つ目の項目

• 2つ目の項目

  • ネストされた項目

  • もう1つのネストされた項目

    • 深いネスト

• 3つ目の項目

- 1つ目の項目
- 2つ目の項目
  - ネストされた項目
  - もう1つのネストされた項目
    - 深いネスト
- 3つ目の項目

番号付きリスト

1. ステップ1

2. ステップ2

3. サブステップ1

4. サブステップ2

5. ステップ3

1. ステップ1
2. ステップ2
   1. サブステップ1
   2. サブステップ2
3. ステップ3

引用

これは引用ブロックです。複数行にまたがることができ、 内部で書式付きテキストも使用できます。

> これは引用ブロックです。複数行にまたがることができ、
> 内部で**書式付きテキスト**も使用できます。

テーブル

| 機能       | 状態        | 備考               |
| ---------- | ----------- | ------------------ |
| MDX        | サポート済み | zfb組み込み         |
| zfbクラスモード | 組み込み | コードハイライト |
| Tailwind   | v4          | トークンベースの設計 |

リンク

内部リンク：はじめに

外部リンク：外部サイトの例

内部リンク：[はじめに](../getting-started/index.mdx)

外部リンク：[外部サイトの例](https://example.com)

水平線

3つのダッシュで水平線を作成できます：

---