MDX Syntax Reference for nisshi.dev

## Heading 2
### Heading 3
#### Heading 4

**Bold text**
*Italic text*
~~Strikethrough~~
`Inline code`

- Bullet point 1
- Bullet point 2
  - Nested item

1. Numbered list 1
2. Numbered list 2

> This is a blockquote.
> It can span multiple lines.

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

[Blog List](/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
// Starting from line 10
function world() {
  console.log("World");
}
```

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

// Starting from line 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[Additional Info]
This is supplementary information with a custom title.
:::

:::info
This is supplementary information.
:::

:::warning
This is a warning message.
:::

:::error
This is an error message.
:::

:::success
This is a success message.
:::

:::idea
This is an idea or hint.
:::

<Cards>
  <Card title="Learn about Next.js" href="https://nextjs.org/docs" />
  <Card title="Learn about Fumadocs" href="https://fumadocs.dev" />
</Cards>

<Cards>
  <Card href="https://nextjs.org/docs" title="Data Fetching">
    Learn about data fetching methods in Next.js
  </Card>
  <Card title="href is optional">
    You can create description cards without links
  </Card>
</Cards>

https://nextjs.org

https://fumadocs.dev

https://github.com/honojs/hono

<LinkCard
  url="https://example.com"
  title="Site Title"
  description="Site description"
/>

Pythagorean theorem: $$c = \pm\sqrt{a^2 + b^2}$$

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

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

![Sample image](https://pbs.twimg.com/media/G0Hwhu-bUAEbQBC?format=jpg&name=small)

<Figure caption="Event venue">
  ![Venue photo](./venue.jpg)
</Figure>

<Video src="/content/blog/example/video.webm" alt="Demo video playback">
  Video description text
</Video>

<Model3D src="/models/robot.glb" alt="Robot model" autoRotate>
  3D robot model (drag to rotate, scroll to zoom)
</Model3D>

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

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

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

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

<MediaGrid>
  <Figure caption="Physical venue">
    ![Physical](./real.jpg)
  </Figure>
  <Figure caption="VR venue">
    ![VR](./vr.jpg)
  </Figure>
</MediaGrid>

```mermaid
graph TD
    A[Start] --> B{Condition}
    B -->|Yes| C[Process A]
    B -->|No| D[Process B]
    C --> E[End]
    D --> E
```

| Feature | Description | Status |
|---------|-------------|--------|
| MDX | Extended Markdown syntax | ✅ |
| Syntax Highlighting | Code coloring | ✅ |
| Math | KaTeX formula display | ✅ |

---
title: Article Title
description: Article description (used for SEO and OGP)
type: tech  # tech or idea
topics: ["Next.js", "React"]  # Tags
createdAt: 2025-01-01
published: true
featured: false  # Featured article
---