# Code blocks use syntax highlighting

- **Pattern:** `ab-000137` (`ai-chat-visibility.response-display.code-block-formatting`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-000137
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-000137)

## Why it matters

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.

## Severity rationale

High because unhighlighted code materially degrades every developer-facing use case of the product.

## Remediation

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.

```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>
```

## Detection

- **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`:

  ```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>
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-000137