Code Diff

CodeDiff compares two fenced code blocks. The first block is the old version; the second is the new version.

<CodeDiff>
  ```tsx
  123231321
  ```

  ```tsx
  123
  231
  321
  ```
</CodeDiff>

Deleted lines appear on the left in red, and added lines appear on the right in green. Missing counterparts reserve an empty space. Each side retains its original line numbers. Long lines wrap, and paired rows always share the same height.

Unchanged lines and titles

Unchanged lines appear on both sides. Use a code fence's title to label each version; otherwise, the headers display Before and After.

<CodeDiff>
  ```tsx title="Before: greeting.tsx"
  export function Greeting() {
    return <p>Hello</p>
  }
  ```
  ```tsx title="After: greeting.tsx"
  export function Greeting() {
    const name = "Code Atlas"
    return <p>Hello, {name}!</p>
  }
  ```
</CodeDiff>

Exactly two fenced code blocks are required. Syntax highlighting follows each fence's language and supports light and dark themes.