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. Set up transformerMetaHighlight:
Shiki Notation Highlight Transformer
import { transformerMetaHighlight } from "@shikijs/transformers";

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

export { rehypeShikiOptions };
  1. Customize the styles in your CSS file if needed:
shikiShiki Highlighter#styles

The main highlighter utility to render syntax highlighted code.

Usage

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",
});
```