Использование подсветки синтаксиса с tsx react markdown

Question

Я слежу за Github https://github.com/remarkjs/react-markdown и пытаюсь добавить SyntaxHighlighter в свои фрагменты кода уценки. Я получаю указанную ниже ошибку при попытке использовать пример кода внутри функции, которую я использую для рендеринга сообщений. В Markdown используются три обратных кавычки, и здесь используется NextJS.

Если я закомментирую строку {...props} красное подчеркивание удалено, но я не вижу, чтобы код вступил в силу в моих сообщениях

Пытался добавить что-либо, как показано ниже, но все же я не вижу никакого эффекта в уценке.

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

Ошибка:

      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 

Код:

      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

Я столкнулся с подобной проблемой сегодня. Похоже, что их документы повсюду. Я вижу, что SyntaxHighlighter требует дочерних элементов, но вам не удалось добавить его как часть тега. Ниже приведен мой фрагмент кода с закомментированным реквизитом, как и вы. Этот фрагмент кода является редактированием из commentjs .

            <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>
          )
        }
      }}
       />