Go back

MDX Cheatsheet

Salman Alfarisi

Fullstack Engineer

Rehype Pretty Code

rehype-pretty-code is a Rehype plugin powered by the shiki syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.

Editor-Grade Highlighting

Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and the popularity of its themes ecosystem — use any VS Code theme you want!

Line Numbers and Line Highlighting

You can highlight specific lines or words using [!code highlight], track diffs using [!code ++] and [!code --], and even highlight a word using [!code word:"refs"]

import { useFloating } from "@floating-ui/react";
 
function MyComponent() {
  const { refs, floatingStyles } = useFloating(); 
 
  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}

import math
 
radius = 2
radius = 5
area = math.pi * radius**2
print(f"The area of the circle is: {area}")

npm install rehype-pretty-code

Image by Nahid Hatami