Compare

Side-by-side code comparison. Each fenced code block becomes a labeled panel. Labels default to the code block's language.

Basic usage

Panels are automatically labeled by their code block language.

{% compare %}
```javascript
function greet(name) {
  return `Hello, ${name}!`;
}
```

```typescript
function greet(name: string): string {
  return `Hello, ${name}!`;
}
```
{% /compare %}

javascript

function greet(name) {
  return `Hello, ${name}!`;
}

typescript

function greet(name: string): string {
  return `Hello, ${name}!`;
}

Custom labels

Use the labels attribute to override the default language-based labels.

{% compare labels="Before, After" %}
```javascript
const data = fetch('/api').then(r => r.json());
```

```javascript
const data = await fetch('/api').then(r => r.json());
```
{% /compare %}

Before

const data = fetch('/api').then(r => r.json());

After

const data = await fetch('/api').then(r => r.json());

Attributes

Attribute	Type	Default	Description
`layout`	`string`	`side-by-side`	Display layout: `side-by-side` or `stacked`
`labels`	`string`	—	Comma-separated custom labels for each panel