nisshi.devブログで使えるMDX記法紹介

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

**太字テキスト**
*斜体テキスト*
~~取り消し線~~
`インラインコード`

- 箇条書き1
- 箇条書き2
  - ネストした項目

1. 番号付きリスト1
2. 番号付きリスト2

> これは引用文です。
> 複数行にまたがることもできます。

[Google](https://google.com)

[ブログ一覧](/blog)

```js
console.log('Hello World');
```

console.log('Hello World');

```typescript title="src/components/Button.tsx"
export function Button({ onClick }: { onClick: () => void }) {
  return <button onClick={onClick}>Click me</button>;
}
```

export function Button({ onClick }: { onClick: () => void }) {
  return <button onClick={onClick}>Click me</button>;
}

```js lineNumbers
function hello() {
  console.log("Hello");
}
```

```js lineNumbers=10
// 10行目から開始
function world() {
  console.log("World");
}
```

function hello() {
  console.log("Hello");
}

// 10行目から開始
function world() {
  console.log("World");
}

def hello_world():
    print("Hello, World!")

hello_world()

npm install my-package

{
  "name": "my-project",
  "version": "1.0.0"
}

```package-install
my-package
```

```tsx ts2js
import { ReactNode } from 'react';
export default function Layout({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}
```

```ts tab="TypeScript"
const message: string = "Hello";
```

```js tab="JavaScript"
const message = "Hello";
```

:::info[補足情報]
これはカスタムタイトル付きの補足情報です。
:::

:::info
これは補足情報です。
:::

:::warning
これは警告メッセージです。
:::

:::danger
これはエラーメッセージです。
:::

:::success
これは成功メッセージです。
:::

<Cards>
  <Card title="Next.jsについて学ぶ" href="https://nextjs.org/docs" />
  <Card title="Fumadocsについて学ぶ" href="https://fumadocs.dev" />
</Cards>

<Cards>
  <Card href="https://nextjs.org/docs" title="データフェッチング">
    Next.jsでのデータ取得方法について学びます
  </Card>
  <Card title="hrefは省略可能">
    リンクなしの説明カードも作れます
  </Card>
</Cards>

https://nextjs.org

https://fumadocs.dev

https://github.com/honojs/hono

<LinkCard
  url="https://example.com"
  title="サイトのタイトル"
  description="サイトの説明文"
/>

ピタゴラスの定理: $$c = \pm\sqrt{a^2 + b^2}$$

```math
E = mc^2
```

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

![サンプル画像](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)

<Figure caption="イベント会場の様子">
  ![会場写真](./venue.jpg)
</Figure>

<Video src="/content/blog/example/video.webm" alt="デモ動画の再生画面">
  動画の説明テキスト
</Video>

<Model3D src="/models/robot.glb" alt="ロボットモデル" autoRotate>
  3Dロボットモデル（ドラッグで回転、ホイールでズーム）
</Model3D>

<VrmViewer src="/models/avatar.vrm" alt="VRMアバター">
  VRMアバター（ドラッグで回転、ホイールでズーム）
</VrmViewer>

<SplatViewer src="/splats/scene.spz" alt="3Dスキャンシーン">
  Gaussian Splatシーン（ドラッグで回転、ホイールでズーム）
</SplatViewer>

<TilesViewer
  cesiumIon={{ assetId: "2602291" }}
  camera={{ lat: 35.6569, lon: 139.7464, height: 294 }}
  region={{ lat: 35.6616, lon: 139.7433, radius: 500 }}
  alt="PLATEAUの東京都3Dモデル"
>
  PLATEAU 3D都市モデル（ドラッグで回転、ホイールでズーム）
</TilesViewer>

<PanoramaViewer src="/images/panorama-360.jpg" alt="360°パノラマ">
  Equirectangular形式 - 上下左右すべての方向を見回せます
</PanoramaViewer>

<PanoramaViewer type="cylindrical" src="/images/panorama.jpg" alt="パノラマ">
  Cylindrical形式 - 水平方向のみ見回せます
</PanoramaViewer>

<VR180Viewer src="/content/blog/example/vr180-video.mp4" alt="VR180動画">
  VR180動画（ドラッグで見回し、クリックで再生/一時停止）
</VR180Viewer>

https://www.youtube.com/watch?v=Vxtr-JzaePY

https://x.com/nisshi_dev/status/1697919798217200076

<MediaGrid cols={2}>
  ![画像1](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)
  ![画像2](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)
</MediaGrid>

<MediaGrid cols={3} gap="sm">
  ![画像1](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)
  ![画像2](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)
  ![画像3](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)
</MediaGrid>

<MediaGrid>
  <Figure caption="リアル会場">
    ![リアル](./real.jpg)
  </Figure>
  <Figure caption="VR会場">
    ![VR](./vr.jpg)
  </Figure>
</MediaGrid>

<DesktopOnly
  fallbackUrl="https://example.com/embed"
  fallbackTitle="埋め込みコンテンツ"
>
  <iframe src="https://example.com/embed" />
</DesktopOnly>

```mermaid
graph TD
    A[開始] --> B{条件分岐}
    B -->|Yes| C[処理A]
    B -->|No| D[処理B]
    C --> E[終了]
    D --> E
```

| 機能 | 説明 | 対応状況 |
|------|------|----------|
| MDX | Markdownの拡張構文 | ✅ |
| シンタックスハイライト | コードの色付け | ✅ |
| 数式 | KaTeX による数式表示 | ✅ |

---
title: 記事のタイトル
description: 記事の説明文（SEO・OGPに使用）
subtitle: サブタイトル（オプション）
type: tech  # tech, report, tutorial, idea, diary
topics: ["Next.js", "React"]  # タグ
createdAt: 2025-01-01
published: true
featured: false  # 注目記事
archived: false  # アーカイブ済み
ogImage: /og/custom-og.png  # カスタムOGP画像（省略時は自動生成）
---