MDX記述サンプル集 - MDX Writing Samples

export const metadata = {
title: 'ページタイトル',
description: 'ページの説明文です。',
}

# メインタイトル

# H1見出し（1ページに1つまで）

## H2見出し（メインセクション）

### H3見出し（サブセクション）

#### H4見出し（必要に応じて）

### 日本語見出しのサンプル

### English Heading Sample

### Mixed 日英 Heading サンプル

**太字テキスト** や _斜体テキスト_ を使用できます。
`インラインコード` も使用可能です。

[外部リンク](https://example.com)
[内部リンク](/quickstart)
[アンカーリンク](#section-id)

// JavaScript コードサンプル
function greetUser(name) {
  console.log(`Hello, ${name}!`)
  return `Welcome to our documentation, ${name}`
}

const user = 'Developer'
greetUser(user)

// TypeScript インターフェース定義
interface User {
  id: number
  name: string
  email: string
  isActive: boolean
}

// 関数の型定義
const createUser = (userData: Omit<User, 'id'>): User => {
  return {
    id: Math.floor(Math.random() * 1000),
    ...userData,
  }
}

{
  "name": "project-name",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^18.0.0"
  }
}

# プロジェクトのセットアップ
npm install
npm run dev

# Git操作
git add .
git commit -m "Add new feature"
git push origin main

- 第一項目
- 第二項目
- ネストした項目
  - サブ項目1
  - サブ項目2
    - より深いネスト

1. 最初のステップ
2. 二番目のステップ
3. ネストした手順
   1. サブステップA
   2. サブステップB
4. 最終ステップ

- [x] 完了した項目
- [x] もう一つの完了項目
- [ ] 未完了の項目
- [ ] 今後の予定項目

| 項目名 | 説明           | 必須 |
| ------ | -------------- | ---- |
| name   | ユーザー名     | ✓    |
| email  | メールアドレス | ✓    |
| age    | 年齢           | -    |

| Status Code | Description  | Response                                 |
| ----------- | ------------ | ---------------------------------------- |
| 200         | Success      | `{ "status": "ok", "data": {...} }`      |
| 400         | Bad Request  | `{ "error": "Invalid parameters" }`      |
| 401         | Unauthorized | `{ "error": "Authentication required" }` |
| 500         | Server Error | `{ "error": "Internal server error" }`   |

> これは重要な引用文です。公式ドキュメントからの引用や、重要な注意事項を記載する際に使用します。
>
> 複数行の引用も可能で、読みやすい形で表示されます。

> メインの引用文です。
>
> > これはネストした引用で、さらに詳細な情報や補足説明に使用できます。

---

```javascript
// 良い例
const example = 'Hello World'
```

```
// 悪い例（言語指定なし）
const example = "Hello World";
```

![代替テキスト](/images/sample.png)

<div
  style={{
    padding: '16px',
    backgroundColor: '#f5f5f5',
    borderRadius: '8px',
    margin: '16px 0',
  }}
>
  <strong>カスタムスタイルボックス</strong>
  <br />
  特別な装飾が必要な場合にHTMLとCSSを組み合わせて使用できます。
</div>

export const projectName = '555GTADoc'
export const version = '1.0.0'

プロジェクト名: {projectName}  
バージョン: {version}