[!WARNING] This package is still a work in progress, it is not yet recommended for production use. Contributions are welcome! My goal is to eventually build this out as a near-drop-in replacement for
react-syntax-highlighter
Syntax highlighting component and hook for react using Shiki
- 🖼️ Provides a
ShikiHighlighter
component for highlighting code as children, as well as auseShikiHighlighter
hook for more flexibility - 🔐 No
dangerouslySetInnerHTML
, output from Shiki is parsed usinghtml-react-parser
- 📦 Supports all Shiki languages and themes
- 📚 Includes minimal default styles for code blocks
- 🚀 Shiki dynamically imports only the languages and themes used on a page, optimizing for performance
- 🖥️
ShikiHighlighter
component displays a language label for each code block whenshowLanguage
is set totrue
(default) - 🎨 Users can customize the styling of the generated code blocks by passing a
style
object or aclassName
[pnpm|bun|yarn|npm] [add|install] react-shiki
You can use the ShikiHighlighter
component, or the useShikiHighlighter
hook to highlight code.
useShikiHighlighter
is a hook that takes in the code to be highlighted, the language, and the theme, and returns the highlighted code as React elements. It's useful for users who want full control over the rendering of highlighted code.
const highlightedCode = useShikiHighlighter(code, language, theme);
The ShikiHighlighter
component is imported in your project, with the code to be highlighted passed as it's children.
Shiki automatically handles dynamically importing only the languages and themes used on the page.
function CodeBlock() {
return (
<ShikiHighlighter language="jsx" theme="ayu-dark">
{code.trim()}
</ShikiHighlighter>
);
}
The component accepts several props in addition to language and theme:
-
showLanguage: boolean
- Shows the language name in the top right corner of the code block. -
addDefaultStyles
: boolean - Adds default styles (padding, overflow handling, and border-radius) to the code block. -
as: string
- The component to be rendered. Defaults to 'pre'. -
className: string
- Class name to be passed to the component. -
style: object
- Style object to be passed to the component.
function Houston() {
return (
<ShikiHighlighter
language="jsx"
theme="houston"
showLanguage={false}
addDefaultStyles={true}
as="div"
style={{
textAlign: 'left',
}}
>
{code.trim()}
</ShikiHighlighter>
);
}
It can also be used with react-markdown
:
import type { ReactNode } from 'react';
import type { BundledLanguage } from 'shiki';
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+)/);
// TODO: remove need for consumer use of BundledLanguage from shiki
const language = match ? (match[1] as BundledLanguage) : undefined;
const isInline: boolean | undefined = node ? isInlineCode(node) : undefined;
return !isInline ? (
<ShikiHighlighter
language={language as BundledLanguage}
theme={'houston'}
{...props}>
{String(children)}
</ShikiHighlighter>
) : (
<code className={className} {...props}>
{children}
</code>
);
};
Pass CodeHighlight to react-markdown
as a code component:
import ReactMarkdown from 'react-markdown';
import { CodeHighlight } from './CodeHighlight';
<ReactMarkdown
components={{
code: CodeHighlight,
}}
>
{markdown}
</ReactMarkdown>
This works great for highlighting in realtime on the client, I use it for an LLM chatbot UI, it renders markdown and highlights code in memoized chat messages:
const RenderedMessage = React.memo(({ message }: { message: Message }) => (
<div className={cn(messageStyles[message.role])}>
<ReactMarkdown components={{ code: CodeHighlight }}>
{message.content}
</ReactMarkdown>
</div>
));
export const ChatMessages = ({ messages }: { messages: Message[] }) => {
return (
<div className='space-y-4'>
{messages.map((message) => (
<RenderedMessage key={message.id} message={message} />
))}
</div>
);
};