wehub-resource-sync
e30e75b5d4
Code Quality / Oxlint + Oxfmt (push) Waiting to run
Code Quality / Template Sync (push) Waiting to run
Code Quality / Build Changed Packages (push) Waiting to run
Code Quality / Test Changed Packages (push) Waiting to run
Deploy Expo Example / Deploy Production (push) Waiting to run
Deploy Ink Example / Deploy Production (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-stream, 3.12) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.10) (push) Waiting to run
Python Tests / pytest (assistant-ui-sync-server-api, 3.12) (push) Waiting to run
Deploy Shadcn Registry / Deploy Production (push) Waiting to run
Template Metrics / LOC + Bundle Size (push) Waiting to run
Changesets / Create Version PR (push) Has been cancelled
1.5 KiB
1.5 KiB
@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.