Code blocks use syntax highlighting

Code is one of the highest-value outputs of an AI chat product, and unstyled code is close to useless: variable names, keywords, and strings blur together, indentation collapses when copied, and language cues disappear. Developer-facing AI tools lose the entire code-review, debug, and learning use case without syntax highlighting. A monospace font alone is not enough; colorized tokens are what make code visually scannable and differentiate the product from a plain text box.

Install react-syntax-highlighter (or shiki for SSR-friendly highlighting) and wire it into your markdown component at src/components/chat/MessageBubble.tsx via the components prop on ReactMarkdown, passing the detected language through to the highlighter.

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
<ReactMarkdown components={{
  code({ className, children }) {
    const lang = className?.replace('language-', '');
    return <SyntaxHighlighter language={lang}>{children}</SyntaxHighlighter>;
  }
}}>{content}</ReactMarkdown>