Diff

::diff{line=212 label="Suggested change"}
```ts [packages/zoom/src/client.ts]
function close() {
  dialog.close();
  history.back();
}
```
```ts
function close() {
  dialog.close();
  if (opened) history.back();
}
```
::

::diff{line=1}
```ts [src/limits.ts]
```
```ts
export const MAX_FILTERS = 3;
```
::

The header shows the file and how many lines were added and removed. Removed lines are red and added lines green. Within a pair of changed lines, the words that changed are a shade deeper. The line numbers and the + and − come from CSS, so copying a selection copies only the code.

::diff{line=212 label="Suggested change"}
```ts [packages/zoom/src/client.ts]
history.back();
```
```ts
if (opened) history.back();
```
::

Write two ordinary fenced blocks, before then after, and nothing else inside. Leave the first block empty for a new file, or the second for a deleted one.

Keep both blocks to the lines around the change. One diff shows one file and takes no unified diff. It's for a change a reader should see, and a few lines before and after show that best. The plugin reports a block over 200 lines, two blocks in different languages or files, and a diff with no change.

The line numbers and the + and − come from CSS, so copying a selection copies only the code. With Comark's shiki plugin, both blocks keep their highlighting, and a line a block highlights, like ```ts {2}, stays highlighted.

The plugin adds every problem to meta.issues, as Validation describes. Each issue names its diff, by its file, and says how to fix it. Each kind has its own rule in Doctor.

The plugin takes no options. In comarkUi(), diff: false turns it off.

comark-ui brings comark-diff and registers it. To use it alone, install it and pass the renderer's components:

pnpm add comark @comark/html comark-diff

import { createHtmlRenderer } from "@comark/html";
import diff, { components } from "comark-diff/html";

const render = createHtmlRenderer({ plugins: [diff()], components });

It's HTML only: Vue, React, and Svelte have no diff components. The renderer inlines the styles once per document, and the output needs no script. Add Comark's shiki plugin to keep the code's highlighting. Renderers covers using it with other plugins.

A diff is a card in the style of shadcn/ui's Card, so it follows the shared tokens in Theming and turns dark with them. Removed and added lines take their own red and green, which mean something in any theme. The rules sit in a comark CSS layer, so any plain rule of your own wins.

With Comark's shiki plugin, the code's colors are Shiki's.

Set them on .cd, the root of every diff:

Lines take a tint of each color, and the changed words a deeper tint. The dark shades follow the system's dark mode. A site that turns dark with a .dark class has to set them too: .dark .cd { --cd-red: #fd736d; --cd-green: #59d38c }.

GitHub's colors, the page's code font, and no deeper shade on the changed words:

.cd {
  --cd-red: #cf222e;
  --cd-green: #1a7f37;
  --cd-font: "JetBrains Mono", monospace;
}

.cd-code :is(del, ins) {
  background: none;
}