MDX language preview

1. Import and export statements

horizon-dark

import { Chart } from "./chart";
import type { Point } from "./types";

export const title = "Dashboard";

# {title}

atom-one-dark

import { Chart } from "./chart";
import type { Point } from "./types";

export const title = "Dashboard";

# {title}

github-dark

import { Chart } from "./chart";
import type { Point } from "./types";

export const title = "Dashboard";

# {title}

dracula

import { Chart } from "./chart";
import type { Point } from "./types";

export const title = "Dashboard";

# {title}

nord

import { Chart } from "./chart";
import type { Point } from "./types";

export const title = "Dashboard";

# {title}

github

import { Chart } from "./chart";
import type { Point } from "./types";

export const title = "Dashboard";

# {title}

2. Markdown headings and formatting

horizon-dark

# Getting started

Some **bold** text and `inline code`.

- first item
- second item

1. ordered
2. list

atom-one-dark

# Getting started

Some **bold** text and `inline code`.

- first item
- second item

1. ordered
2. list

github-dark

# Getting started

Some **bold** text and `inline code`.

- first item
- second item

1. ordered
2. list

dracula

# Getting started

Some **bold** text and `inline code`.

- first item
- second item

1. ordered
2. list

nord

# Getting started

Some **bold** text and `inline code`.

- first item
- second item

1. ordered
2. list

github

# Getting started

Some **bold** text and `inline code`.

- first item
- second item

1. ordered
2. list

3. JSX components

horizon-dark

<Card title="Hello">
  <p>Welcome to the docs.</p>
</Card>

<Alert variant="warning">
  Remember to save your work.
</Alert>

atom-one-dark

<Card title="Hello">
  <p>Welcome to the docs.</p>
</Card>

<Alert variant="warning">
  Remember to save your work.
</Alert>

github-dark

<Card title="Hello">
  <p>Welcome to the docs.</p>
</Card>

<Alert variant="warning">
  Remember to save your work.
</Alert>

dracula

<Card title="Hello">
  <p>Welcome to the docs.</p>
</Card>

<Alert variant="warning">
  Remember to save your work.
</Alert>

nord

<Card title="Hello">
  <p>Welcome to the docs.</p>
</Card>

<Alert variant="warning">
  Remember to save your work.
</Alert>

github

<Card title="Hello">
  <p>Welcome to the docs.</p>
</Card>

<Alert variant="warning">
  Remember to save your work.
</Alert>

4. JavaScript expressions

horizon-dark

# Stats

The total is {items.length} items.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

atom-one-dark

# Stats

The total is {items.length} items.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

github-dark

# Stats

The total is {items.length} items.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

dracula

# Stats

The total is {items.length} items.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

nord

# Stats

The total is {items.length} items.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

github

# Stats

The total is {items.length} items.

<ul>
  {items.map((item) => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>

5. Comparison inside a JSX attribute

horizon-dark

<Chart data={data} highlight={value > threshold} />

atom-one-dark

<Chart data={data} highlight={value > threshold} />

github-dark

<Chart data={data} highlight={value > threshold} />

dracula

<Chart data={data} highlight={value > threshold} />

nord

<Chart data={data} highlight={value > threshold} />

github

<Chart data={data} highlight={value > threshold} />

6. Fenced code block

horizon-dark

# Example

```typescript
type User = { id: string; name: string };

export function greet(user: User): string {
  return `Hello, ${user.name}`;
}
```

atom-one-dark

# Example

```typescript
type User = { id: string; name: string };

export function greet(user: User): string {
  return `Hello, ${user.name}`;
}
```

github-dark

# Example

```typescript
type User = { id: string; name: string };

export function greet(user: User): string {
  return `Hello, ${user.name}`;
}
```

dracula

# Example

```typescript
type User = { id: string; name: string };

export function greet(user: User): string {
  return `Hello, ${user.name}`;
}
```

nord

# Example

```typescript
type User = { id: string; name: string };

export function greet(user: User): string {
  return `Hello, ${user.name}`;
}
```

github

# Example

```typescript
type User = { id: string; name: string };

export function greet(user: User): string {
  return `Hello, ${user.name}`;
}
```

7. Import without a trailing semicolon

horizon-dark

import Chart from "./chart"
export const title = "Dashboard"

# {title}

This heading and paragraph render normally instead of being
absorbed into the import statement above.

atom-one-dark

import Chart from "./chart"
export const title = "Dashboard"

# {title}

This heading and paragraph render normally instead of being
absorbed into the import statement above.

github-dark

import Chart from "./chart"
export const title = "Dashboard"

# {title}

This heading and paragraph render normally instead of being
absorbed into the import statement above.

dracula

import Chart from "./chart"
export const title = "Dashboard"

# {title}

This heading and paragraph render normally instead of being
absorbed into the import statement above.

nord

import Chart from "./chart"
export const title = "Dashboard"

# {title}

This heading and paragraph render normally instead of being
absorbed into the import statement above.

github

import Chart from "./chart"
export const title = "Dashboard"

# {title}

This heading and paragraph render normally instead of being
absorbed into the import statement above.

Kitchen sink

horizon-dark

import { Tabs, TabItem } from "@components/Tabs";
import { Chart } from "./chart";
import type { Point } from "./types";

export const meta = {
  title: "Kitchen sink",
  description: "MDX grammar preview",
};

# {meta.title}

Welcome to the **MDX** preview. This page mixes `markdown`, JSX, and JavaScript.

## Features

- import / export statements
- **bold** and `inline code`
- JSX components
- {expressions} in prose

## Counter

export const initialCount = 0;

The current count is **{count}**.

<button onClick={() => setCount((c) => c + 1)}>Increment</button>

## Chart

<Chart
  data={[
    { x: 0, y: 1 },
    { x: 1, y: 3 },
    { x: 2, y: 2 },
  ]}
  title={meta.title}
/>

## Code sample

```javascript
const total = items.reduce((sum, item) => sum + item.value, 0);
console.log(`Total: ${total}`);
```

## List rendering

<ul>
  {["alpha", "beta", "gamma"].map((label) => (
    <li key={label}>{label.toUpperCase()}</li>
  ))}
</ul>

<Tabs>
  <TabItem label="One">First tab</TabItem>
  <TabItem label="Two">Second tab</TabItem>
</Tabs>

<!-- HTML comments are preserved -->

atom-one-dark

import { Tabs, TabItem } from "@components/Tabs";
import { Chart } from "./chart";
import type { Point } from "./types";

export const meta = {
  title: "Kitchen sink",
  description: "MDX grammar preview",
};

# {meta.title}

Welcome to the **MDX** preview. This page mixes `markdown`, JSX, and JavaScript.

## Features

- import / export statements
- **bold** and `inline code`
- JSX components
- {expressions} in prose

## Counter

export const initialCount = 0;

The current count is **{count}**.

<button onClick={() => setCount((c) => c + 1)}>Increment</button>

## Chart

<Chart
  data={[
    { x: 0, y: 1 },
    { x: 1, y: 3 },
    { x: 2, y: 2 },
  ]}
  title={meta.title}
/>

## Code sample

```javascript
const total = items.reduce((sum, item) => sum + item.value, 0);
console.log(`Total: ${total}`);
```

## List rendering

<ul>
  {["alpha", "beta", "gamma"].map((label) => (
    <li key={label}>{label.toUpperCase()}</li>
  ))}
</ul>

<Tabs>
  <TabItem label="One">First tab</TabItem>
  <TabItem label="Two">Second tab</TabItem>
</Tabs>

<!-- HTML comments are preserved -->

github-dark

import { Tabs, TabItem } from "@components/Tabs";
import { Chart } from "./chart";
import type { Point } from "./types";

export const meta = {
  title: "Kitchen sink",
  description: "MDX grammar preview",
};

# {meta.title}

Welcome to the **MDX** preview. This page mixes `markdown`, JSX, and JavaScript.

## Features

- import / export statements
- **bold** and `inline code`
- JSX components
- {expressions} in prose

## Counter

export const initialCount = 0;

The current count is **{count}**.

<button onClick={() => setCount((c) => c + 1)}>Increment</button>

## Chart

<Chart
  data={[
    { x: 0, y: 1 },
    { x: 1, y: 3 },
    { x: 2, y: 2 },
  ]}
  title={meta.title}
/>

## Code sample

```javascript
const total = items.reduce((sum, item) => sum + item.value, 0);
console.log(`Total: ${total}`);
```

## List rendering

<ul>
  {["alpha", "beta", "gamma"].map((label) => (
    <li key={label}>{label.toUpperCase()}</li>
  ))}
</ul>

<Tabs>
  <TabItem label="One">First tab</TabItem>
  <TabItem label="Two">Second tab</TabItem>
</Tabs>

<!-- HTML comments are preserved -->

dracula

import { Tabs, TabItem } from "@components/Tabs";
import { Chart } from "./chart";
import type { Point } from "./types";

export const meta = {
  title: "Kitchen sink",
  description: "MDX grammar preview",
};

# {meta.title}

Welcome to the **MDX** preview. This page mixes `markdown`, JSX, and JavaScript.

## Features

- import / export statements
- **bold** and `inline code`
- JSX components
- {expressions} in prose

## Counter

export const initialCount = 0;

The current count is **{count}**.

<button onClick={() => setCount((c) => c + 1)}>Increment</button>

## Chart

<Chart
  data={[
    { x: 0, y: 1 },
    { x: 1, y: 3 },
    { x: 2, y: 2 },
  ]}
  title={meta.title}
/>

## Code sample

```javascript
const total = items.reduce((sum, item) => sum + item.value, 0);
console.log(`Total: ${total}`);
```

## List rendering

<ul>
  {["alpha", "beta", "gamma"].map((label) => (
    <li key={label}>{label.toUpperCase()}</li>
  ))}
</ul>

<Tabs>
  <TabItem label="One">First tab</TabItem>
  <TabItem label="Two">Second tab</TabItem>
</Tabs>

<!-- HTML comments are preserved -->

nord

import { Tabs, TabItem } from "@components/Tabs";
import { Chart } from "./chart";
import type { Point } from "./types";

export const meta = {
  title: "Kitchen sink",
  description: "MDX grammar preview",
};

# {meta.title}

Welcome to the **MDX** preview. This page mixes `markdown`, JSX, and JavaScript.

## Features

- import / export statements
- **bold** and `inline code`
- JSX components
- {expressions} in prose

## Counter

export const initialCount = 0;

The current count is **{count}**.

<button onClick={() => setCount((c) => c + 1)}>Increment</button>

## Chart

<Chart
  data={[
    { x: 0, y: 1 },
    { x: 1, y: 3 },
    { x: 2, y: 2 },
  ]}
  title={meta.title}
/>

## Code sample

```javascript
const total = items.reduce((sum, item) => sum + item.value, 0);
console.log(`Total: ${total}`);
```

## List rendering

<ul>
  {["alpha", "beta", "gamma"].map((label) => (
    <li key={label}>{label.toUpperCase()}</li>
  ))}
</ul>

<Tabs>
  <TabItem label="One">First tab</TabItem>
  <TabItem label="Two">Second tab</TabItem>
</Tabs>

<!-- HTML comments are preserved -->

github

import { Tabs, TabItem } from "@components/Tabs";
import { Chart } from "./chart";
import type { Point } from "./types";

export const meta = {
  title: "Kitchen sink",
  description: "MDX grammar preview",
};

# {meta.title}

Welcome to the **MDX** preview. This page mixes `markdown`, JSX, and JavaScript.

## Features

- import / export statements
- **bold** and `inline code`
- JSX components
- {expressions} in prose

## Counter

export const initialCount = 0;

The current count is **{count}**.

<button onClick={() => setCount((c) => c + 1)}>Increment</button>

## Chart

<Chart
  data={[
    { x: 0, y: 1 },
    { x: 1, y: 3 },
    { x: 2, y: 2 },
  ]}
  title={meta.title}
/>

## Code sample

```javascript
const total = items.reduce((sum, item) => sum + item.value, 0);
console.log(`Total: ${total}`);
```

## List rendering

<ul>
  {["alpha", "beta", "gamma"].map((label) => (
    <li key={label}>{label.toUpperCase()}</li>
  ))}
</ul>

<Tabs>
  <TabItem label="One">First tab</TabItem>
  <TabItem label="Two">Second tab</TabItem>
</Tabs>

<!-- HTML comments are preserved -->