SyntaxHighlighter.tsx

// @ts-expect-error
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter/dist/esm/index';
// @ts-expect-error
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
// @ts-expect-error
import ts from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
// @ts-expect-error
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';
SyntaxHighlighter.registerLanguage('tsx', tsx);
SyntaxHighlighter.registerLanguage('ts', ts);
SyntaxHighlighter.registerLanguage('css', css);

import { Box } from '../system';
import Text from '../Typography/Text';
import * as styles from './SyntaxHighlighter.css';

export interface CodeProps {
  language: string;
  children: string;
  tokenized?: boolean;
}

export default ({ language, children, tokenized }: CodeProps) => {
  return (
    <Box className={styles.root}>
      <Text size="code" component="div" baseline={false}>
        {tokenized ? (
          <code
            className={`language-${language}`}
            data-language={language}
            dangerouslySetInnerHTML={{ __html: children }}
          />
        ) : (
          <SyntaxHighlighter
            language={language}
            style={{ [`pre[class*="language-"]`]: {} }}
          >
            {children}
          </SyntaxHighlighter>
        )}
      </Text>
    </Box>
  );
};