如何在react中应用markdown- to -jsx包中的代码高亮？

Question

我使用markdown- to -jsx包来呈现react项目中的文档内容。这个包提供了一个Markdown组件，它接受一个选项属性来覆盖HTML元素的默认样式，等等。

const markdownOptions = {
    wrapper: DocsContentWrapper, 
    forceWrapper: true,
    overrides: {
        h1: LeadTitle,
        h2: SecondaryTitle,
        h3: ThirdTitle,
        p: Paragraph, 
        pre: CodeWrapper,
        ol: ListWrapper,
        li: ListItem,
    },
};

<Markdown 
    options={MarkdownOptions}
>
    {MockDoc}
</Markdown>

现在，Markdown组件接受了一个markdown，所以我向它传递了一个字符串，该字符串的格式符合markdown rules。

它包含一些代码块，比如下面的代码块，我想给这些代码块添加颜色：

​

​

我已经创建了一个使用‘react- using highlighter’包的组件，它看起来如下所示：

import React from 'react';

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism"

const SyntaxHighligher = ({ language, markdown }) => {
    
    return (
        <SyntaxHighlighter 
            language={language} 
            style={tomorrow}
        >
            {markdown}
        </SyntaxHighlighter>
    );
};

export default SyntaxHighligher;

问题来了--我该如何集成这两者呢？我在想，如果options对象接受这样的配置，那是有意义的，但是通过他们的GitHub页面查看“markdown-to-jsx”docs，没有显示任何选项。

我已经看到了一个名为'react-markdown‘的包，它能够接受我的SyntaxHighligher组件和任务，但我想将同样的功能应用于'markdown- to -jsx’包。

Answer 1

markdown-to-jsx将代码块生成为<pre><code>...</code></pre>，但我们不能简单地覆盖code标记，因为内联代码也使用它。来自markdown-to-jsx的自述文件建议我们可以通过某种方式覆盖pre > code：

某些元素映射与其他库稍有不同，特别是：

span：用于内联文本。

code：用于内联代码。

pre > code：代码块是以pre作为其直接祖先的代码元素。

但根据我的实验和对源代码的阅读，我认为唯一的方法是覆盖pre并在其children中检查code。例如：

import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter';
import {materialDark as CodeStyle} from 'react-syntax-highlighter/dist/esm/styles/prism';

const CodeBlock = ({className, children}) => {
  let lang = 'text'; // default monospaced text
  if (className && className.startsWith('lang-')) {
    lang = className.replace('lang-', '');
  }
  return (
    <SyntaxHighlighter language={lang} style={CodeStyle}>
      {children}
    </SyntaxHighlighter>
  );
}

// markdown-to-jsx uses <pre><code/></pre> for code blocks.
const PreBlock = ({children, ...rest}) => {
  if ('type' in children && children ['type'] === 'code') {
    return CodeBlock(children['props']);
  }
  return <pre {...rest}>{children}</pre>;
};

const YourComponent = () => {
  return (
    <Markdown
      options={{
        overrides: {
          pre: PreBlock,
        },
      }}
    >
      {yourMarkdown}
    </Markdown>
  );
};

不幸的是，如果你想同时覆盖内联代码和代码块，我没有一个好的解决方案。当覆盖pre和code标记时，由SyntaxHighlighter生成的code标记也会被覆盖，因此内联代码和代码块的呈现方式相同。