如何在react中应用markdown-to-jsx包中的代码突出显示？

Question

我正在使用 markdown-to-jsx 包来在我的 React 项目中呈现文档内容。该包提供了一个 Markdown 组件，它接受一个 options 属性来覆盖 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规则格式化的字符串。

它包含一些代码块，如下所示，我想为其添加颜色：

我使用“react-syntax-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;

那么问题来了——如何将两者结合起来？我认为如果选项对象接受这样的配置，那就有意义了，但是通过他们的 GitHub 页面查看“markdown-to-jsx”文档，没有显示任何选项。

我看到了一个名为“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并检查code其children. 例如：

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标签时，code生成的标签SyntaxHighlighter也会被重写，因此内联代码和代码块的渲染方式相同。