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.
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!
Draw attention to a particular line of code.
import { useFloating } from "@floating-ui/react";
function MyComponent() {
const { refs, floatingStyles } = useFloating();
return (
<>
<div ref={refs.setReference} />
<div ref={refs.setFloating} style={floatingStyles} />
</>
);
}Draw attention to a particular word or series of characters.
import { useFloating } from "@floating-ui/react";
function MyComponent() {
const { refs, floatingStyles } = useFloating();
return (
<>
<div ref={refs.setReference} />
<div ref={refs.setFloating} style={floatingStyles} />
</>
);
} vite v5.0.0 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 125ms.
8:38:02 PM [vite] hmr update /src/App.jsxInline ANSI: > Local: http://localhost:3000/
function isEven(number) {
if (number === 1) {
return false;
} else if (number === 2) {
return true;
} else if (number === 3) {
return false;
} else if (number === 4) {
return true;
} else if (number === 5) {
return false;
} else if (number === 6) {
return true;
} else if (number === 7) {
return false;
} else if (number === 8) {
return true;
} else if (number === 9) {
return false;
} else if (number === 10) {
return true;
} else {
return "Number is not between 1 and 10.";
}
}
// Example usage:
console.log(isEven(3)); // Should return false
console.log(isEven(4)); // Should return true
console.log(isEven(11)); // Should return "Number is not between 1 and 10."