Streamdown-Prism

A minimal fork of streamdown that uses Prism instead of Shiki for code syntax highlighting.

Why This Fork?

The original streamdown package uses Shiki for syntax highlighting, which:

• Requires async loading of language grammars
• Has a larger bundle size due to TextMate grammars
• Loads themes and languages from a CDN

This fork replaces Shiki with prism-react-renderer, providing:

• Synchronous highlighting - No async loading, instant rendering
• Smaller bundle - Prism's grammars are more lightweight
• No CDN dependency - Everything is bundled locally
• Simpler setup - No need to configure theme/language loading

Differences from Original

| Feature | streamdown (original) | streamdown-prism (this fork) | |---------|----------------------|------------------------------| | Highlighter | Shiki | Prism | | Loading | Async (CDN) | Sync (bundled) | | Languages | 100+ via CDN | ~30 built-in | | Themes | Many via CDN | github-light, github-dark, oneDark |

Not Included

This fork does not include the optional plugin packages from the original monorepo:

• @streamdown/math - LaTeX/KaTeX rendering
• @streamdown/cjk - CJK text support
• @streamdown/mermaid - Mermaid diagrams (built-in mermaid support still works)

Installation

npm i streamdown-prism

Then, update your Tailwind globals.css to include the following:

@source "../node_modules/streamdown-prism/dist/*.js";

Make sure the path matches the location of the node_modules folder in your project.

Usage

import { useChat } from "@ai-sdk/react";
import { Streamdown, prism } from "streamdown-prism";

export default function Chat() {
  const { messages, status } = useChat();

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? (
              <Streamdown
                key={index}
                plugins={{ code: prism }}
                isAnimating={status === 'streaming'}
              >
                {part.text}
              </Streamdown>
            ) : null,
          )}
        </div>
      ))}
    </div>
  );
}

Supported Languages

The built-in Prism plugin supports these languages:

• javascript, typescript, jsx, tsx
• python, java, go, rust, ruby, php, swift, kotlin, scala
• c, cpp, csharp, objectivec
• sql, bash/shell, json, yaml, xml, html, css
• markdown, graphql, diff, r

Language aliases like js, ts, py, sh are also supported.

Custom Themes

import { createPrismPlugin } from "streamdown-prism";

const customPrism = createPrismPlugin({
  themes: ["github-light", "oneDark"], // [light theme, dark theme]
});

<Streamdown plugins={{ code: customPrism }}>
  {content}
</Streamdown>

Credits

This is a fork of streamdown by Vercel. All credit for the core streaming markdown functionality goes to the original authors.

License

Apache-2.0 (same as original)