Notation Diff - Code Blocks

Preview

.ts

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

Installation

Install the following dependencies:

Shiki Transformers

pnpm i @shikijs/transformers -D

Set up transformerNotationDiff:

Shiki Notation Highlight Transformer

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

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

export { rehypeShikiOptions };

Customize the styles in your CSS file if needed:

shikiShiki Highlighter#styles

The main highlighter utility to render syntax highlighted code.

Usage

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

.mdx

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