Meta Highlight

How to highlight specific lines with meta tags in code blocks.

ShikiMarkdownMDX

Preview

.ts
const code = `console.log('hello')`;
const highlighter = await highlight();
const html = highlighter.codeToHtml(code, {
  lang: "javascript",
  theme: "one-light",
});

Installation

  1. Install the following dependencies:
Shiki Transformers
pnpm i @shikijs/transformers -D
  1. Customize the styles in your CSS file if needed:
shikiShiki Highlighter#styles

The main highlighter utility to render syntax highlighted code.

Usage

shikijs/rehype

  1. Set up transformerMetaHighlight:
Shiki Notation Highlight Transformer
import { transformerMetaHighlight } from "@shikijs/transformers";

const rehypeShikiOptions: RehypeShikiCoreOptions = {
  //...
  transformers: [
    transformerMetaHighlight({
      className: "shiki-line-highlight",
    }),
  ],
};

export { rehypeShikiOptions };
  1. To highlight specific lines in your code blocks, use the meta prop with the line numbers you want to highlight. For example, to highlight lines 2 and 3, use the following syntax:
.mdx
```{4,5}
const code = `console.log('hello')`;
const highlighter = await highlight();
const html = highlighter.codeToHtml(code, {
  lang: "javascript",
  theme: "one-light",
});
```