使用带有 tsx react markdown 的语法高亮

Question

我正在关注 Github https://github.com/remarkjs/react-markdown 并尝试将 SyntaxHighlighter 添加到我的降价代码 sn-ps 中。尝试在用于呈现帖子的函数中使用示例代码时，出现下面提到的错误。 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 需要孩子，但您未能将其添加为标签的一部分。下面是我的代码 sn-p，其中的道具也被注释掉了。 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>
          )
        }
      }}
       />