Notation Focus - Code Blocks

Preview

.ts

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

Installation

Install the following dependencies:

Shiki Transformers

pnpm i @shikijs/transformers -D

Set up transformerNotationFocus:

Shiki Notation Highlight Transformer

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

const rehypeShikiOptions: RehypeShikiCoreOptions = {
  //...
  transformers: [
    transformerNotationFocus({
      classActivePre: "shiki-has-focused",
    }),
  ],
};

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(); // [!code focus]
const html = highlighter.codeToHtml(code, {
  lang: "typescript", // [!code ++]
  theme: "one-light",
});
```