---
title: @streamdown/code
description: Syntax highlighting for code blocks using Shiki.
type: reference
summary: Add syntax highlighting with 200+ languages, dual themes, and lazy-loaded grammars.
prerequisites:
  - /docs/plugins
related:
  - /docs/code-blocks
---

# @streamdown/code



The `@streamdown/code` plugin provides syntax highlighting for code blocks using [Shiki](https://shiki.style/).

* Supports 200+ programming languages
* Languages are lazy-loaded on demand
* Dual theme support (light/dark mode)
* Token caching for performance

## Install

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npm install @streamdown/code
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add @streamdown/code
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add @streamdown/code
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add @streamdown/code
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Tailwind CSS

### Tailwind v4

Add the following `@source` directive to your `globals.css` or main CSS file:

```css title="globals.css"
@source "../node_modules/@streamdown/code/dist/*.js";
```

The path must be relative from your CSS file to the `node_modules` folder containing `@streamdown/code`. In a monorepo, adjust the number of `../` segments to reach the root `node_modules`.

### Tailwind v3

Add `@streamdown/code` to your `content` array in `tailwind.config.js`:

```js title="tailwind.config.js"
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./node_modules/@streamdown/code/dist/*.js",
  ],
  // ... rest of your config
};
```

In a monorepo, adjust the path to reach the root `node_modules`:

```js title="tailwind.config.js"
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "../../node_modules/@streamdown/code/dist/*.js",
  ],
  // ... rest of your config
};
```

## Usage

```tsx
import { code } from '@streamdown/code';

<Streamdown plugins={{ code }}>
  {markdown}
</Streamdown>
```

## Custom configuration

```tsx
import { createCodePlugin } from '@streamdown/code';

const code = createCodePlugin({
  themes: ['github-light', 'github-dark'], // [light, dark]
});
```

See [Code Blocks](/docs/code-blocks) for details on rendering behavior, line numbers, and copy buttons.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)