小编eDi*_*sis的帖子

我正在使用 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 …