# Diff via shiki transformers

> A diff expressed through a shiki transformer instead of props.

A shadcn/ui block from the [@reui](https://reui.io) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/reui/c-code-block-6).

- Page, with a live preview: https://shadcn.exchange/r/reui/c-code-block-6
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-code-block-6-light-aeb2ecaaf46abb2f.png
- Registry item: https://reui.io/r/new-york-v4/c-code-block-6.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-code-block-6.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@reui/code-block`

## Files

### `c-code-block-6.tsx`

```tsx
"use client"

import {
  CodeBlock,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@/components/reui/code-block/code-block"

/**
 * Diff styling expressed as notation inside the source rather than as props.
 * `transformers` is a straight pass-through to shiki, so `@shikijs/transformers`
 * works without the primitive knowing about it. The directive above is required:
 * this object carries a method, and functions cannot cross a server boundary.
 */
const notationDiff = {
  line(node: { properties: Record<string, unknown> }, line: number) {
    if (line === 2) node.properties.class = "line diff remove"
    if (line === 3) node.properties.class = "line diff add"
  },
}

const code = `export function slugify(input: string) {
  return input.toLowerCase().replace(/ /g, "-")
  return input.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-")
}`

/* The array itself must be module-scope: `transformers` is a reference dep
   of the highlight effect, so a fresh array each render re-tokenizes. */
const transformers = [notationDiff]

export function Pattern() {
  return (
    <div className="w-full max-w-2xl">
      <CodeBlock
        code={code}
        language="typescript"
        showLineNumbers
        transformers={transformers}
      >
        <CodeBlockHeader>
          <CodeBlockTitle>slugify.ts</CodeBlockTitle>
          <CodeBlockCopyButton className="ml-auto" />
        </CodeBlockHeader>
      </CodeBlock>
    </div>
  )
}
```