2025-02-14 SyntaxHighlighter cannot be used as a JSX component

import {Prism as SyntaxHighlighter  , SyntaxHighlighterProps} from 'react-syntax-highlighter'

...
 <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={oneDark}
          />
...

image.png

解决方法：

import {Prism, SyntaxHighlighterProps} from 'react-syntax-highlighter'
const SyntaxHighlighter = (Prism as any) as React.FC<SyntaxHighlighterProps>;

...
    <SyntaxHighlighter
            {...rest}
            PreTag="div"
            children={String(children).replace(/\n$/, '')}
            language={match[1]}
            style={oneDark}
          />
...

image.png

参考地址：https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/539

image.png