MDX Syntax Available on nisshi.dev Blog

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

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

- Bullet item 1
- Bullet item 2
  - Nested item

1. Numbered item 1
2. Numbered item 2

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

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

[Blog posts](/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.
:::

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

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

<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 also create description-only 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>

<VrmViewer src="/models/avatar.vrm" alt="VRM avatar">
  VRM avatar (drag to rotate, scroll to zoom)
</VrmViewer>

<SplatViewer src="/splats/scene.spz" alt="3D scanned scene">
  Gaussian Splat scene (drag to rotate, scroll to zoom)
</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 Tokyo 3D model"
>
  PLATEAU 3D city model (drag to rotate, scroll to zoom)
</TilesViewer>

<PanoramaViewer src="/images/panorama-360.jpg" alt="360° panorama">
  Equirectangular format - look around in all directions
</PanoramaViewer>

<PanoramaViewer type="cylindrical" src="/images/panorama.jpg" alt="Panorama">
  Cylindrical format - look around horizontally only
</PanoramaViewer>

<VR180Viewer src="/content/blog/example/vr180-video.mp4" alt="VR180 video">
  VR180 video (drag to look around, click to play/pause)
</VR180Viewer>

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

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

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

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

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

<DesktopOnly
  fallbackUrl="https://example.com/embed"
  fallbackTitle="Embedded content"
>
  <iframe src="https://example.com/embed" />
</DesktopOnly>

```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 | Mathematical expressions via KaTeX | ✅ |

---
title: Article Title
description: Article description (used for SEO and OGP)
subtitle: Subtitle (optional)
type: tech  # tech, report, tutorial, idea, diary
topics: ["Next.js", "React"]  # Tags
createdAt: 2025-01-01
published: true
featured: false  # Featured article
archived: false  # Archived
ogImage: /og/custom-og.png  # Custom OGP image (auto-generated if omitted)
---