How to get react-markdown to properly format backticks?

Question

I am using the react-markdown (https://www.npmjs.com/package/react-markdown) component to render markdown. I ran into an issue with rendering `. It seems like it is not applying the highlighting aspect.

This is what I am trying to allow.

Some text with a hightlight foo bar

  const components = {
    code({ inline, className, children, ...props }: any) {
      const match = /language-(\w+)/.exec(className ?? '');
      return !inline && match ? (
        <SyntaxHighlighter
          language={match[1]}
          PreTag="div"
          children={String(children).replace(/\n$/, '')}
          {...props}
        />
      ) : (
        <code className={className} {...props} />
      );
    },
  };

  return (
    <ReactMarkdown components={components} remarkPlugins={[gfm]}>
      {content}
    </ReactMarkdown>
  );

Foo bar doesn't show up using react-markdown. Anyone have any suggestions?

Thanks!

Your code string is just text. it's not clear what you're actually trying to escape. — isherwood, Feb 14 '22 at 19:18
I updated the post to also include a picture of what I am trying to enable. — xjinx, Feb 14 '22 at 19:21

score 0 · Answer 1 · answered Feb 28 '23 at 08:00

I ran into this problem and fixed it with a bit of css.

Separate the inline condition in the code function and add the className inline-code to the code tag.

const components = {
  code({ inline, className, children, ...props }: any) {
    const match = /language-(\w+)/.exec(className ?? "");

    if (inline) {
      return (
        <code {...props} className="inline-code">
          {children}
        </code>
      );
    }

    return match ? (
      <SyntaxHighlighter
        language={match[1]}
        PreTag="div"
        children={String(children).replace(/\n$/, "")}
        {...props}
      />
    ) : (
      <code className={className} {...props} />
    );
  },
};

return (
  <ReactMarkdown components={components} remarkPlugins={[gfm]}>
    {content}
  </ReactMarkdown>
);

Then in your css you can add the styles necessary to highlight the text.

.inline-code {
    display: inline-block;
    padding: 2px 4px;
    color: #232629;
    background-color: #e3e6e8;
    border-radius: 3px;
}

How to get react-markdown to properly format backticks?

1 Answers1