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

## 見出し

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

### 見出し3

#### 見出し4

```mdx
## Heading 2
### Heading 3
#### Heading 4
```

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

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

```css title="src/styles/global.css"
:root {
  --zdc-doc-title-font: "Georgia", serif;
  --zdc-doc-title-weight: 800;
}
```

| Token | Component | Default | What it controls |
| --- | --- | --- | --- |
| `--zdc-doc-title-font` | `doc-title` | `inherit` | Font family of the page-title `<h1>`. |
| `--zdc-doc-title-weight` | `doc-title` | `var(--font-weight-bold)` | Font weight of the page-title `<h1>`. |
| `--zdc-doc-title-tracking` | `doc-title` | `var(--tracking-normal)` | Letter spacing of the page-title `<h1>`. |
| `--zdc-doc-h2-font` | `heading-h2` | `inherit` | Font family of content `<h2>` headings. |
| `--zdc-doc-h2-weight` | `heading-h2` | `var(--font-weight-bold)` | Font weight of content `<h2>` headings. |
| `--zdc-doc-h2-tracking` | `heading-h2` | `var(--tracking-normal)` | Letter spacing of content `<h2>` headings. |
| `--zdc-doc-h3-weight` | `heading-h3` | `var(--font-weight-bold)` | Font weight of content `<h3>` headings. |
| `--zdc-doc-h4-weight` | `heading-h4` | `var(--font-weight-semibold)` | Font weight of content `<h4>` headings. |
| `--zdc-doc-prose-font` | `doc-prose` | `var(--font-sans)` | Font family of the `.zd-content` prose area. Headings with `--zdc-doc-*-font: inherit` inherit this value. |
| `--zdc-doc-link-decoration` | `content-link` | `underline` | Text decoration of prose links only (`ContentLink`, `a.text-accent.underline`); chrome links are unaffected. Set to `none` to remove underlines. |
| `--zdc-admonition-radius` | `admonition` | `0 var(--radius-DEFAULT) var(--radius-DEFAULT) 0` | Border radius of admonition/callout blocks. |
| `--zdc-admonition-border-width` | `admonition` | `4px` | Width of the admonition left accent border. |

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

## テキストの書式

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

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

## インラインコード

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

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

## コードブロック

フェンスドコードブロックは、zfbのビルド時セマンティッククラスモードでシンタックスハイライトされます。開始バッククォートの後に言語を指定します。詳しくは[コードブロック](https://zudo-doc.takazudomodular.com/ja/docs/components/code-blocks)を参照してください。

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

````mdx
```ts

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

```
````

### サポートされている言語

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

| 言語 | 識別子 |
| -------- | ---------- |
| TypeScript | `ts`, `typescript` |
| JavaScript | `js`, `javascript` |
| HTML | `html` |
| CSS | `css` |
| JSON | `json` |
| Bash / Shell | `bash`, `sh`, `shell`, `zsh` |
| Markdown | `md`, `markdown` |
| MDX | `mdx` |
| YAML | `yaml`, `yml` |
| Python | `python`, `py` |
| Rust | `rust`, `rs` |
| Go | `go` |
| SQL | `sql` |
| GraphQL | `graphql` |
| Diff | `diff` |
| TOML | `toml` |
| JSX / TSX | `jsx`, `tsx` |

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

## 箇条書きリスト

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

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

## 番号付きリスト

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

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

## 引用

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

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

## テーブル

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

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

## リンク

内部リンク：[はじめに](https://zudo-doc.takazudomodular.com/ja/docs/getting-started)

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

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

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

## 水平線

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

---

```mdx
---
```