useShiki

Client-side syntax highlighting that renders code to React nodes with Shiki.

Powered by

shiki

Installation

npx shadcn@latest add @redpanda/use-shiki

pnpm dlx shadcn@latest add @redpanda/use-shiki

yarn dlx shadcn@latest add @redpanda/use-shiki

bunx shadcn@latest add @redpanda/use-shiki

nubx shadcn@latest add @redpanda/use-shiki

aube dlx shadcn@latest add @redpanda/use-shiki

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?)

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.