The @streamdown/code plugin provides syntax highlighting for code blocks using Shiki.

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

Tailwind v4

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

@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:

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:

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

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

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

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

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

See Code Blocks for details on rendering behavior, line numbers, and copy buttons.