如何让react-markdown正确格式化反引号？

Question

我正在使用react-markdown（https://www.npmjs.com/package/react-markdown）组件来渲染markdown。 我遇到了渲染`的问题。 看起来它没有应用突出显示方面。

这就是我试图允许的。

一些带有突出显示的文本

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

使用react-markdown Foo bar 不会显示。 大家有什么建议吗？

谢谢！

Answer 1

我遇到了这个问题并用一些 css 修复了它。

将

inline

函数中的

code

条件分开，并将className

inline-code

添加到代码标签中。

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

然后在 CSS 中，您可以添加突出显示文本所需的样式。

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

Answer 2

或者，您也可以使用以下 css 来定位内联代码

.reactMarkDown code:not(pre code) {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    background-color: black;
    color: aqua;
    border-radius: 0.5em;
    padding: 0.2em 0.4em;
}

 <ReactMarkdown
 className= `reactMarkDown`
 components={components} remarkPlugins={[gfm]}>
      {content}
    </ReactMarkdown>