github-featured/assistant-ui--assistant-ui

Files

T

github-actions[bot] 6804bd3a8e chore: update versions (#5724 )

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

2026-08-08 02:16:57 -07:00

full

fix: prettier formatting issues across the codebase (#2318 )

2025-08-13 15:28:24 -07:00

src

chore: re-enable useImportType and useLiteralKeys biome rules (#3819 )

2026-04-13 15:18:34 -07:00

CHANGELOG.md

chore: update versions (#5724 )

2026-08-08 02:16:57 -07:00

package.json

chore: update versions (#5724 )

2026-08-08 02:16:57 -07:00

README.md

docs: standardize package READMEs to a tier convention (#4007 )

2026-05-11 11:27:41 +08:00

tsconfig.json

chore: migrate from tsup to tsc for all builds, tidy package.jsons, harmonize tsconfigs (#2961 )

2025-12-20 14:06:46 -08:00

README.md

`@assistant-ui/react-syntax-highlighter`

Code-block syntax highlighting for @assistant-ui/react-markdown, powered by react-syntax-highlighter. Use the light or async builds to keep your bundle size small.

When to use this

Pair this with @assistant-ui/react-markdown when you want syntax-highlighted code blocks. If you want a batteries-included setup with Shiki built in, use @assistant-ui/react-streamdown instead.

Installation

npm install @assistant-ui/react @assistant-ui/react-markdown @assistant-ui/react-syntax-highlighter react-syntax-highlighter

Usage

import { makeLightSyntaxHighlighter } from "@assistant-ui/react-syntax-highlighter";
import { coldarkDark } from "react-syntax-highlighter/dist/cjs/styles/prism";
import js from "react-syntax-highlighter/dist/cjs/languages/hljs/javascript";
import ts from "react-syntax-highlighter/dist/cjs/languages/hljs/typescript";

export const SyntaxHighlighter = makeLightSyntaxHighlighter({
  style: coldarkDark,
  languages: { javascript: js, typescript: ts },
});

Pass the resulting component as the SyntaxHighlighter override to MarkdownTextPrimitive.

Builds

makeLightSyntaxHighlighter / makeLightAsyncSyntaxHighlighter: hljs grammars.
makePrismLightSyntaxHighlighter / makePrismAsyncLightSyntaxHighlighter: Prism grammars.

Full reference at assistant-ui.com/docs/ui/syntax-highlighting.