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

score 1 · Answer 1 · answered Dec 25 '21 at 01:04

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

Thank you thank you. This line specifically is what fixed me up after hours of troubleshooting. `children={String(children).replace(/\n$/, '')}` Interestingly, I had no problems if I passed the syntax highlighter to the Code component only. — Ross Moody, Dec 31 '21 at 01:22
I believe that is merely caused by typescript since it does not check to see if the code in that component is valid. From experience, I do not notice an issue until the code tries to run. I usually create a separate function that I can unit test and then reference the component inside of the code component. — giande, Jan 02 '22 at 03:43

Using syntax highlighter with tsx react markdown

1 Answers1