const code = `type Languages = "javascript" | "typescript";`;
const highlighter = await highlight();
const html = highlighter.codeToHtml(code, {
  lang: "javascript", 
  lang: "typescript", 
  theme: "one-light",
});

Installation

1. Install the following dependencies:

pnpm i @shikijs/transformers -D

2. Customize the styles in your CSS file if needed:

Usage

shikijs/rehype

1. Set up transformerNotationDiff:

import { transformerNotationDiff } from "@shikijs/transformers";

const rehypeShikiOptions: RehypeShikiCoreOptions = {
  //...
  transformers: [transformerNotationDiff()],
};

export { rehypeShikiOptions };

2. To add diff notation to your code blocks, use the [!code ++] and [!code --] markers to indicate added and removed lines, respectively:

• Typescript/JavaScript:

```
const code = `type Languages = "javascript" | "typescript";`;
const highlighter = await highlight();
const html = highlighter.codeToHtml(code, {
  lang: "javascript", // [!code --]
  lang: "typescript", // [!code ++]
  theme: "one-light",
});
```

• React Code (TSX/JSX):

Use the {/* [!code ++] */} and {/* [!code --] */} comment syntax instead:

```tsx
export default function Page() {
  return (
    <h1>Hello</h1> {/* [!code --] */}
    <h1>Hello World</h1> {/* [!code ++] */}
  );
}
```

The transformer automatically detects tsx and jsx languages and handles the { /* */ } comment syntax accordingly.