Hooks
useShiki
Client-side syntax highlighting that renders code to React nodes with Shiki.
Made by FumadocsPowered by
Installation
useShiki highlights a code string with Shiki and returns rendered React nodes (not an HTML string), so highlighting composes with your own pre/code components. It lazy-loads the highlighter, caches instances across calls, and aborts stale renders when the code or dependencies change. It powers the registry's dynamic CodeBlock.
Usage
import { useShiki } from "@/hooks/use-shiki";
function Highlighted({ code }: { code: string }) {
const rendered = useShiki(
code,
{
lang: "tsx",
themes: { light: "github-light", dark: "github-dark" },
},
[code]
);
return <>{rendered}</>;
}API
useShiki(code, options, deps?)
| Parameter | Type | Description |
|---|---|---|
code | string | The source code to highlight. |
options | HighlightOptions & ... | Shiki options: lang, theme/themes, engine, components, plus loading (fallback node) and withPrerenderScript. |
deps | DependencyList | Optional deps controlling when highlighting re-runs. Defaults to lang + code. |
Returns ReactNode — the highlighted output, or the loading node until the highlighter resolves.
The package also exports highlight() / getHighlighter() for one-off, non-hook highlighting.
Set fallbackLanguage in options to gracefully degrade unknown languages to plain text instead of throwing.
Built by malinskibeniamin. The source code is available on GitHub.