Syntax Highlighting

Beautiful code formatting with themes

ChatJS renders AI responses with full syntax highlighting for code blocks, powered by Streamdown.

How It Works

Backend: Markdown in Responses

The system prompt instructs models to use markdown formatting, including fenced code blocks:

export const systemPrompt = () => `You are a friendly assistant!

## Your Goals
- Markdown is supported in the response and you can use it to format the response.

## Content Rules:
- Use structured answers with markdown format and tables too.
- If a diagram is needed, return it in a fenced mermaid code block.
`;

Models return code in standard markdown fenced blocks:

```typescript
function greet(name: string) {
  return `Hello, ${name}!`;
}
```

Frontend: Streamdown Rendering

The Response component wraps Streamdown, a markdown renderer optimized for AI streaming:

import { Streamdown } from "streamdown";

export const Response = memo(
  ({ className, ...props }: ResponseProps) => (
    <Streamdown
      className={cn(
        "size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
        className
      )}
      {...props}
    />
  )
);

Streamdown handles:

• Syntax highlighting for 100+ languages via Shiki
• Streaming-safe parsing that doesn’t break mid-token
• Mermaid diagrams rendered inline
• Math equations with KaTeX support
• Tables, lists, and formatting with proper styling

Supported Languages

Streamdown supports all languages supported by Shiki, including:

Theming

Syntax highlighting automatically adapts to light/dark mode. The theme is configured in Streamdown and uses VS Code-compatible color schemes.

To customize the code theme, see the Streamdown documentation.