# 見出し 1（H1）

## 見出し 2（H2）

### 見出し 3（H3）

#### 見出し 4（H4）

通常の段落テキスト。Notion の見出しブロックは H1〜H4 に対応しています。

通常の段落（paragraph）です。**太字**・*斜体*・~~取り消し線~~・`インラインコード` が使えます。

[リンクテキスト](https://github.com/mosugi/notro-tail)もサポートしています。

**箇条書きリスト（Bullet list）**

- アイテム 1
- アイテム 2
  - ネストされたアイテム 2-1
  - ネストされたアイテム 2-2
- アイテム 3

**番号付きリスト（Numbered list）**

1. 最初のステップ
2. 次のステップ
   1. サブステップ 2-1
   2. サブステップ 2-2
3. 最後のステップ

**タスクリスト（To-do）**

- [x] 完了したタスク
- [x] これも完了
- [ ] 未完了のタスク
- [ ] もう一つの未完了タスク

:::callout{color="blue_background"}
💡 **情報コールアウト（blue）**

これはコールアウトブロックです。Notion のコールアウトが
`:::callout{color="..."}` ディレクティブ構文に変換されます。
:::

:::callout{color="yellow_background"}
⚠️ **警告コールアウト（yellow）**

色付きのコールアウトも表示できます。
:::

:::callout{color="red_background"}
🚨 **エラーコールアウト（red）**

コールアウト内に複数の段落を含めることもできます。

詳細情報はこちらを参照してください。
:::

<details>
<summary>トグルブロック — クリックで展開</summary>

トグルの中身です。このコンテンツは展開時のみ表示されます。

- ネストされたリストも使えます
- アイテム 2

</details>

<details>
<summary>別のトグル — 折りたたみ例</summary>

長いコンテンツを折りたたむのに便利です。

</details>

> これは引用ブロック（Blockquote）です。
> Notion の「Quote」ブロックに対応しています。
> 複数行の引用も表示できます。

**JavaScript:**

```javascript
// シンタックスハイライト（Shiki）
async function fetchPosts(notion, dbId) {
  const posts = [];
  for await (const page of iteratePaginatedAPI(notion.dataSources.query, {
    data_source_id: dbId,
  })) {
    posts.push(page);
  }
  return posts;
}
```

**TypeScript:**

```typescript
interface NotionPage {
  id: string;
  properties: {
    Name: { title: RichText[] };
    Slug: { rich_text: RichText[] };
    Public: { checkbox: boolean };
  };
}
```

**Bash:**

```bash
# ビルドとプレビュー
npm run build
npm run preview --workspace=notro-tail
```

| ブロックタイプ | Notion 表示 | MDX 出力 |
|---|---|---|
| Paragraph | 普通のテキスト | `<p>` |
| Heading 1 | 大見出し | `<h1>` |
| Heading 2 | 中見出し | `<h2>` |
| Heading 3 | 小見出し | `<h3>` |
| Bulleted list | 箇条書き | `<ul><li>` |
| Numbered list | 番号付き | `<ol><li>` |
| Toggle | 折りたたみ | `<details>` |
| Quote | 引用 | `<blockquote>` |
| Code | コード | `<pre><code>` |
| Callout | コールアウト | `<callout>` |

インライン数式: $E = mc^2$ や $\sum_{i=1}^n x_i$ が書けます。

ブロック数式（KaTeX）:

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

$$
\frac{d}{dx}\left( \int_{0}^{x} f(u)\,du\right) = f(x)
$$

---

<columns>
<column>

**左カラム**

カラムレイアウト（2カラム）の左側です。
Notion の「Columns」ブロックに対応しています。

- 左側のリスト 1
- 左側のリスト 2

</column>
<column>

**右カラム**

カラムレイアウトの右側です。
モバイルでは縦積みになります。

1. 右側の番号リスト 1
2. 右側の番号リスト 2

</column>
</columns>