如何在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 rules 格式化的字符串。

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

我使用“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”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

并检查其

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

标签也会被覆盖，因此内联代码和代码块的渲染方式相同。

Answer 2

我也遇到了同样的问题。这是我的方法

import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import { materialDark } from "react-syntax-highlighter/dist/esm/styles/prism";
import Markdown from "markdown-to-jsx";

function Code({ className, children }) {
  const language = className.replace("lang-", "");
  return (
    <div className="codeBlock">
      <SyntaxHighlighter language={language.toLowerCase()} style={materialDark}>
        {children}
      </SyntaxHighlighter>
    </div>
  );
}

function JsxFromMarkdown() {
  return (
    <div className="markdownContainer">
      <Markdown
        options={{
          overrides: {
            code: {
              component: Code,
            },
          },
        }}
      >
        {markdownContent}
      </Markdown>
    </div>
  );
}

我在代码组件中使用

language={language.toLowerCase()}

，因为我在 markdown 文件中的代码块被写为 ```PYTHON a = 1 + 2 ```。如果您的代码在 markdown 文件中写为 ```python a = 1 + 2 ```，则应在代码组件中使用

language={language}

。