Syntax highlighter

npx shadcn@latest add "@assistant-ui/syntax-highlighter"

npx assistant-ui@latest init

import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime, AssistantChatTransport } from "@assistant-ui/ai-sdk";

export default function App() {
  const runtime = useChatRuntime({
    transport: new AssistantChatTransport({ api: "/api/chat" }),
  });

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {/* your components */}
    </AssistantRuntimeProvider>
  );
}

npx shadcn@latest add "@assistant-ui/syntax-highlighter"

SyntaxHighlighter tokenizes one fenced code block with Prism, through react-syntax-highlighter's async light build, and renders a light and a dark themed variant at once so a theme switch needs no re-render. With a runtime it replaces the plain code Markdown text renders by default; standalone you call it directly with the code, the language, and the tag components it mounts onto.

Getting started

import { SyntaxHighlighter } from "./syntax-highlighter";

const defaultComponents = memoizeMarkdownComponents({
  SyntaxHighlighter,
  h1: /* ... */,
  // ...other elements...
});

import { SyntaxHighlighter } from "@/components/assistant-ui/elements/syntax-highlighter";

<SyntaxHighlighter
  language="tsx"
  code="const x = 1;"
  components={{
    Pre: (props) => <pre {...props} />,
    Code: (props) => <code {...props} />,
  }}
/>;

Anatomy

<>
  <Pre className="dark:hidden">{/* Coldark Cold tokens */}</Pre>
  <Pre className="hidden dark:block">{/* Coldark Dark tokens */}</Pre>
</>

Both the light and the dark highlighter mount on every render; Tailwind's dark: classes hide whichever one does not match the active theme, so switching themes toggles visibility instead of re-tokenizing.

Examples

Register another language

import { PrismAsyncLight } from "react-syntax-highlighter";
import go from "react-syntax-highlighter/dist/esm/languages/prism/go";

PrismAsyncLight.registerLanguage("go", go);

Only js, jsx, ts, tsx (all mapped to the TSX grammar) and python are registered by default. A fenced block whose language is not registered still renders, unhighlighted.

Load every language instead

import { makePrismAsyncSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter/full";

Swap the light-build import for the full build to skip per-language registration entirely, at the cost of a larger bundle.

Choose a different theme

import { oneLight, oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism";

const LightSyntaxHighlighter = makePrismAsyncLightSyntaxHighlighter({
  style: oneLight,
  customStyle: syntaxHighlighterCustomStyle,
  className: "dark:hidden",
});

Pass any react-syntax-highlighter Prism style in place of coldarkCold/coldarkDark; do the same for the dark variant.

API reference

SyntaxHighlighter