Diff

Usage

<Diff> renders a unified-format code diff with color highlighting. Added lines (+) are green, removed lines (-) are red.

<Diff>
{`- const old = "value";
+ const newValue = "value";
const unchanged = true;`}
</Diff>

- const old = "value";
+ const newValue = "value";
const unchanged = true;

Markdown fence alternative

The equivalent markdown fence works the same way and is shorter:

```diff
- const old = "value";
+ const newValue = "value";
const unchanged = true;
```

- const old = "value";
+ const newValue = "value";
const unchanged = true;

So when do you reach for <Diff> instead of the fence? Two cases:

1. Inside another component that doesn't preserve fence metadata (rare)

2. Dynamically computed diff content from a JSX expression

For 95% of cases, the fence is the right call.

Migration guide example

A common diff use case — showing config file migrations:

```diff
{
  "name": "My Docs",
- "version": "1.0",
- "pages": ["intro.mdx"],
+ "navigation": [
+   {
+     "group": "Getting Started",
+     "pages": ["docs/intro"]
+   }
+ ]
}
```

{
  "name": "My Docs",
- "version": "1.0",
- "pages": ["intro.mdx"],
+ "navigation": [
+   {
+     "group": "Getting Started",
+     "pages": ["docs/intro"]
+   }
+ ]
}

Props

Syntax highlighting

Diff colors come from Prism's language-diff grammar wired to your --docs-success and --docs-danger theme tokens. Dark/light mode and tenant overrides apply automatically.