Syntax Highlighting
Syntax highlighting for code blocks in markdown.
assistant-ui
provides two options for syntax highlighting:
- react-shiki (recommended for performance & dynamic language support)
- react-syntax-highlighter (legacy - Prism or Highlight.js based)
react-shiki
Add shiki-highlighter
This adds a /components/assistant-ui/shiki-highlighter.tsx
file to your project and
installs the react-shiki
dependency. The highlighter can be customized by editing
the config in the shiki-highlighter.tsx
file.
Add it to defaultComponents
in markdown-text.tsx
Options
Prop | Type | Default |
---|---|---|
theme | github-dark | |
language | text | |
as? | React.ElementType | pre |
className? | string | - |
style? | React.CSSProperties | - |
delay? | number | - |
customLanguages? | - | |
codeToHastOptions | {} |
Dual/multi theme support
To use multiple theme modes, pass an object with your multi-theme configuration to the theme
prop in the ShikiHighlighter
component:
To make themes responsive to your site's theme mode, add one of the following CSS snippets to your project:
For more information, see Shiki's documentation on dual and multi themes.
react-syntax-highlighter
This option may be removed in a future release. Consider using react-shiki instead.
Add syntax-highlighter
Adds a /components/assistant-ui/syntax-highlighter.tsx
file to your project and installs the react-syntax-highlighter
dependency.
Add it to defaultComponents
in markdown-text.tsx
Options
Supports all options from react-syntax-highlighter
.