Syntax Highlighting

Syntax highlighting for code blocks in markdown.

Syntax highlighting is not enabled in markdown by default.

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`

npx shadcn@latest add "https://r.assistant-ui.com/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`

/components/assistant-ui/markdown-text.tsx

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

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

Options

Prop	Type	Default
`theme`	`Theme \| Themes`	`github-dark`
`language`	`Language (string \| object)`	`text`
`as?`	`React.ElementType`	`pre`
`className?`	`string`	-
`style?`	`React.CSSProperties`	-
`delay?`	`number`	-
`customLanguages?`	`Language[]`	-
`codeToHastOptions`	`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:

/components/assistant-ui/shiki-highlighter.tsx

<ShikiHighlighter
  /* ... */
  theme={{
    light: "github-light",
    dark: "github-dark",
  }}
  /* ... */
>

To make themes responsive to your site's theme mode, add one of the following CSS snippets to your project:

shiki.css

/* for class based dark mode */
html.dark .shiki,
html.dark .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
  /* Optional, if you also want font styles */
  font-style: var(--shiki-dark-font-style) !important;
  font-weight: var(--shiki-dark-font-weight) !important;
  text-decoration: var(--shiki-dark-text-decoration) !important;
}

/* for query based dark mode */
@media (prefers-color-scheme: dark) {
  .shiki,
  .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
    /* Optional, if you also want font styles */
    font-style: var(--shiki-dark-font-style) !important;
    font-weight: var(--shiki-dark-font-weight) !important;
    text-decoration: var(--shiki-dark-text-decoration) !important;
  }
}

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`

npx shadcn@latest add "https://r.assistant-ui.com/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`

/components/assistant-ui/markdown-text.tsx

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

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

Options

Supports all options from react-syntax-highlighter.

Syntax Highlighting

On this page