标签: react-syntax-highlighter

我一直在尝试使用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>
        </>
    );
};

输出截图

您好，我的项目在使用 Sanity v3 和 React Syntax Highlighter 时遇到问题。当我使用库在浏览器中显示我的代码时，它可以通过查看Sanity 的代码输入Refactor中的教程来工作

但是当我想使用 React 语法荧光笔并选择 Prism 作为主题时，我无法显示它，因为错误如下所示：

Server Error TypeError: Super expression must either be null or a function

我正在使用 Next.Js 13 和 Typescript，这是我的代码：

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

types: {
    image: SampleImageComponent,
    code: (props: any) => {
        return (
            <SyntaxHighlighter language={props.value.language} style={dark}>
                {props.value.code}
            </SyntaxHighlighter>
        );
    },
},

如何在我的项目中添加 React 语法荧光笔？