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
これは警告メッセージです。
:::

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

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

:::idea
これはアイデア・ヒントです。
:::

<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>

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

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

<MediaGrid cols={2}>
  ![画像1](./image1.jpg)
  ![画像2](./image2.jpg)
</MediaGrid>

<MediaGrid cols={3} gap="sm">
  ![画像1](./image1.jpg)
  ![画像2](./image2.jpg)
  ![画像3](./image3.jpg)
</MediaGrid>

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

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

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

---
title: 記事のタイトル
description: 記事の説明文（SEO・OGPに使用）
type: tech  # tech または idea
topics: ["Next.js", "React"]  # タグ
createdAt: 2025-01-01
published: true
featured: false  # 注目記事
---