Syntax Highlighting

Syntax highlighting for code blocks in markdown.

Syntax highlighting is not included by default.

assistant-ui offers two ways to add syntax highlighting to your markdown:

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`	`string \| object`	`vitesse-dark`
`language`	`BundledLanguage \| TextmateLanguage`	`text`
`className?`	`string`	-
`style?`	`CSSProperties`	`{}`
`cssVariablePrefix?`	`string`	`--shiki-`
`defaultColor?`	`light \| dark \| string \| false`	-
`delay?`	`number`	-
`customLanguages?`	`TextmateLanguage[]`	`[]`
`transformers?`	`ShikiTransformer[]`	`[]`

Support for all Shiki options in react-shiki is coming soon.

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