mirror of
https://github.com/vercel/streamdown.git
synced 2026-09-19 02:18:37 +08:00
Hayden Bleasel
84 lines
1.9 KiB
Plaintext
84 lines
1.9 KiB
Plaintext
---
|
|
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
|
|
---
|
|
|
|
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
|
|
|
|
```package-install
|
|
npm install @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.
|