基本コンポーネント

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

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

見出し

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

見出し3

見出し4

## Heading 2
### Heading 3
#### Heading 4

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

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

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

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

テキストの書式

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

**Bold text**, *italic text*, and ~~strikethrough~~.
Combine them: ***bold and italic***.

インラインコード

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

Use backticks to mark `inline code` within a sentence.

コードブロック

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

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

```ts

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

```

サポートされている言語

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

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

箇条書きリスト

• 1つ目の項目

• 2つ目の項目

  • ネストされた項目

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

    • 深いネスト

• 3つ目の項目

- First item
- Second item
  - Nested item
  - Another nested item
    - Deeply nested
- Third item

番号付きリスト

1. ステップ1

2. ステップ2

3. サブステップ1

4. サブステップ2

5. ステップ3

1. First step
2. Second step
   1. Sub-step one
   2. Sub-step two
3. Third step

引用

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

> This is a blockquote. It can span multiple lines
> and supports **formatting** within it.

テーブル

| Feature    | Status      | Notes              |
| ---------- | ----------- | ------------------ |
| MDX        | Supported   | Built into zfb     |
| zfb class mode | Built-in | Code highlighting |
| zudo-wind | spec 1          | Token-based design |

リンク

内部リンク：はじめに

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

Internal link: [Getting Started](../getting-started/index.mdx)

External link: [Example external site](https://example.com)

水平線

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

---