小编fro*_*709的帖子

我一直在尝试使用react-syntax-highlighter 在渲染的文本编辑器上在我的网站上生成一段代码。我花了一段时间使用这个插件并且喜欢它，但是我遇到了一个我找不到答案的问题。我想更改生成代码的一些颜色，但除了使用默认选择的主题之外，找不到任何其他方法来执行此操作。它们允许您将样式应用于背景和代码，但不能将样式应用于保存颜色的范围，是否有任何简单的方法来创建和应用自定义主题，或者简单地针对特定类并更改其颜色？

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

const CodeDisplay = ({ active }) => {

const templateString = `
    const NewObject = New Shop(
        console.log('shop');
    )
`
    return (
        <>
            <SyntaxHighlighter
                language="jsx"
                style={atomDark}
                wrapLongLines
                customStyle={{
                    backgroundColor: "transparent",
                    opacity: "1",
                    marginTop: "-2rem",
                }}
                codeTagProps={{
                    style: {
                        color: "white",
                    },
                }}>
                {templateString}
            </SyntaxHighlighter>
        </>
    );
};

输出截图