` is nested within a `` tag,
if not, it's considered inline code and the `inline` prop is set to `true`.
It's passed as a `rehypePlugin` to `react-markdown`:
```tsx
import ReactMarkdown from "react-markdown";
import { rehypeInlineCodeProperty } from "react-shiki";
{markdown}
;
```
Now `inline` can be accessed as a prop in the `code` component:
```tsx
const CodeHighlight = ({
inline,
className,
children,
node,
...props
}: CodeHighlightProps): JSX.Element => {
const match = className?.match(/language-(\w+)/);
const language = match ? match[1] : undefined;
const code = String(children).trim();
return !inline ? (
{code}
) : (
{code}
);
};
```
### Multi-theme Support
To use multiple theme modes, pass an object with your multi-theme configuration to the `theme` prop in the `ShikiHighlighter` component:
```tsx
{code.trim()}
```
Or, when using the hook, pass it to the `theme` parameter:
```tsx
const highlightedCode = useShikiHighlighter(
code,
"tsx",
{
light: "github-light",
dark: "github-dark",
dim: "github-dark-dimmed",
},
{
defaultColor: "dark",
}
);
```
See [shiki's documentation](https://shiki.matsu.io/docs/themes) for more information on dual and multi theme support, and for the CSS needed to make the themes reactive to your site's theme.
### Custom Themes
Custom themes can be passed as a TextMate theme in JavaScript object. For example, [it should look like this](https://github.com/antfu/textmate-grammars-themes/blob/main/packages/tm-themes/themes/dark-plus.json).
```tsx
import tokyoNight from "../styles/tokyo-night.json";
// Using the component
{code.trim()}
// Using the hook
const highlightedCode = useShikiHighlighter(code, "tsx", tokyoNight);
```
### Custom Languages
Custom languages should be passed as a TextMate grammar in JavaScript object. For example, [it should look like this](https://github.com/shikijs/textmate-grammars-themes/blob/main/packages/tm-grammars/grammars/typescript.json)
```tsx
import mcfunction from "../langs/mcfunction.tmLanguage.json";
// Using the component
{code.trim()}
// Using the hook
const highlightedCode = useShikiHighlighter(code, mcfunction, "github-dark");
```
#### Preloading Custom Languages
For dynamic highlighting scenarios where language selection happens at runtime:
```tsx
import mcfunction from "../langs/mcfunction.tmLanguage.json";
import bosque from "../langs/bosque.tmLanguage.json";
// With the component
{code.trim()}
// With the hook
const highlightedCode = useShikiHighlighter(code, "typescript", "github-dark", {
customLanguages: [mcfunction, bosque],
});
```
### Custom Transformers
```tsx
import { customTransformer } from "../utils/shikiTransformers";
// Using the component
{code.trim()}
// Using the hook
const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
transformers: [customTransformer],
});
```
## Performance
### Throttling Real-time Highlighting
For improved performance when highlighting frequently changing code:
```tsx
// With the component
{code.trim()}
// With the hook
const highlightedCode = useShikiHighlighter(code, "tsx", "github-dark", {
delay: 150,
});
```
### Streaming and LLM Chat UI
`react-shiki` can be used to highlight streamed code from LLM responses in real-time.
I use it for an LLM chatbot UI, it renders markdown and highlights
code in memoized chat messages.
Using `useShikiHighlighter` hook:
```tsx
import type { ReactNode } from "react";
import { isInlineCode, useShikiHighlighter, type Element } from "react-shiki";
import tokyoNight from "@styles/tokyo-night.mjs";
interface CodeHighlightProps {
className?: string | undefined;
children?: ReactNode | undefined;
node?: Element | undefined;
}
export const CodeHighlight = ({
className,
children,
node,
...props
}: CodeHighlightProps) => {
const code = String(children).trim();
const language = className?.match(/language-(\w+)/)?.[1];
const isInline = node ? isInlineCode(node) : false;
const highlightedCode = useShikiHighlighter(code, language, tokyoNight, {
delay: 150,
});
return !isInline ? (
{language ? (
{language}
) : null}
{highlightedCode}
) : (
{children}
);
};
```
Or using the `ShikiHighlighter` component:
```tsx
import type { ReactNode } from "react";
import ShikiHighlighter, { isInlineCode, type Element } from "react-shiki";
interface CodeHighlightProps {
className?: string | undefined;
children?: ReactNode | undefined;
node?: Element | undefined;
}
export const CodeHighlight = ({
className,
children,
node,
...props
}: CodeHighlightProps): JSX.Element => {
const match = className?.match(/language-(\w+)/);
const language = match ? match[1] : undefined;
const code = String(children).trim();
const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
return !isInline ? (
{code}
) : (
{code}
);
};
```
Passed to `react-markdown` as a `code` component in memo-ized chat messages:
```tsx
const RenderedMessage = React.memo(({ message }: { message: Message }) => (
{message.content}
));
export const ChatMessages = ({ messages }: { messages: Message[] }) => {
return (
{messages.map((message) => (
))}
);
};
```