---
title: useShiki
description: Client-side syntax highlighting that renders code to React nodes with Shiki.
icon: code
author:
  name: Fumadocs
  url: https://github.com/fuma-nama/fumadocs
---

<PoweredBy packages={[
  { name: 'shiki', url: 'https://shiki.style/' },
]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/use-shiki
```

`useShiki` highlights a code string with [Shiki](https://shiki.style/) 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

```tsx showLineNumbers
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.

:::info
Set `fallbackLanguage` in `options` to gracefully degrade unknown languages to plain text instead of throwing.
:::