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>

• ID: code-block-formatting

• Severity: high

• What to look for: Count all syntax highlighting libraries in dependencies: react-syntax-highlighter, prismjs, highlight.js, shiki, lowlight. If react-markdown is present, check whether a components prop configures a syntax highlighter for code blocks. Quote the actual component configuration if found (e.g., quote the components={{ code: ... }} prop). Look at how fenced code blocks are rendered — as styled highlighted code or as plain pre/code elements.

• Pass criteria: Fenced code blocks in AI responses are rendered with a monospace font and syntax highlighting. Code is visually distinct from prose content. Language-specific keywords are colorized. At least 1 syntax highlighting library is imported and used in the message renderer.

• Fail criteria: Code blocks render as plain text in a standard body font, or as unstyled pre/code elements without any syntax highlighting library.

• Skip (N/A) when: The AI interface is designed exclusively for non-code responses (e.g., a customer support bot that never produces code). Signal: no coding-related prompts or code output patterns, and no code-highlighting dependencies.

• Detail on fail: "No syntax highlighting library detected; code blocks in AI responses will render as unstyled plain text"

• Remediation: Install react-syntax-highlighter and configure it in your markdown component at src/components/chat/MessageBubble.tsx:

  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>