---
title: "@streamdown/code"
description: Syntax highlighting for code blocks using Shiki.
url: "https://streamdown.ai/docs/plugins/code"
docs_index: /llms.txt
lastUpdated: 2026-09-29
type: reference
summary: Add syntax highlighting with 200+ languages, dual themes, and lazy-loaded grammars.
prerequisites:
  - /docs/plugins
related:
  - /docs/code-blocks
---

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

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

```bash
npm install @streamdown/code
```

```bash
pnpm add @streamdown/code
```

```bash
yarn add @streamdown/code
```

```bash
bun add @streamdown/code
```

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