Using syntax highlighter with tsx react markdown

Question

I'm following the Github https://github.com/remarkjs/react-markdown and am trying to add SyntaxHighlighter to my markdown code snippets. I'm getting an error mentioned below when trying to use the example code inside a function which I use to render the posts. Markdown is using three backticks and this uses NextJS.

If I comment out the line {...props} the red underline is removed but I dont see the code taking effect in my posts

Tried adding any as below but still I dont see any effect in the markdown.

code({ node, inline, className, children, ...props }: any)

Error:

No overload matches this call.
  Overload 1 of 2, '(props: SyntaxHighlighterProps | Readonly<SyntaxHighlighterProps>): SyntaxHighlighter', gave the following error.
    Type '{ ref?: LegacyRef<HTMLElement> | undefined; key?: Key | null | undefined; defaultChecked?: boolean | undefined; defaultValue?: string | number | readonly string[] | undefined; ... 255 more ...; PreTag: string; }' is not assignable to type 'IntrinsicClassAttributes<SyntaxHighlighter>'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<HTMLElement> | undefined' is not assignable to type 'LegacyRef<SyntaxHighlighter> | undefined'.
          Type '(instance: HTMLElement | null) => void' is not assignable to type 'LegacyRef<SyntaxHighlighter> | undefined'.
            Type '(instance: HTMLElement | null) => void' is not assignable to type 

Code:

const BlogPost = ({ frontMatter, markdownBody }: BlogPostProps) => {
  if (!frontMatter) return <></>;
  return (
    <Layout>
      <ReactMarkdown
        components={{
          code({ node, inline, className, children, ...props }) {
            const match = /language-(\w+)/.exec(className || "");
            return !inline && match ? (
              <SyntaxHighlighter
                style={vscDarkPlus}
                language={match[1]}
                PreTag="div"
                // {...props}
              >
                {String(children).replace(/\n$/, "")}
              </SyntaxHighlighter>
            ) : (
              <code className={className} {...props}>
                {children}
              </code>
            );
          },
        }}
      >
        {markdownBody}
      </ReactMarkdown>
    </Layout>
  );
};

Answer 1

I encountered a similar issue today. It appears that their docs are all over the place. I see SyntaxHighlighter requires children, but you failed to add it as part of the tag. Below is my code snippet with props being commented out as you have also done. This code snippet is an edit from remarkjs.

      <ReactMarkdown className="preview-markdown" 
      children={input}
      remarkPlugins={[[remarkGfm, {singleTilde: false}]]}
      components={{
        code({node, inline, className, children, ...props}) {
          const match = /language-(\w+)/.exec(className || '')
          return !inline && match ? (
            <SyntaxHighlighter
              children={String(children).replace(/\n$/, '')}
              style={docco}
              language={match[1]}
              PreTag="div"
              // {...props}
            />
          ) : (
            <code className={className} {...props}>
              {children}
            </code>
          )
        }
      }}
       />