我正在使用[@sanity/block-content-to-react](@sanity/block-content-to-react)显示sanity块内容。BlockContent组件由div Package ,类为“prose”。
<div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert ">
<BlockContent
// Pass in block content straight from Sanity.io
blocks={singleBlog.body}
serializers={serializers}
/>
</div>
在我的序列化程序中,我传递的是自定义的<Code/>
组件。
const serializers = {
types: {
code: (props) => <Code props={props} />,
},
};
在我的自定义代码组件中,我使用Syntax Highlighter按代码内容进行 Package 。
<SyntaxHighlighter style={theme} language={props.node.language}>
{props.node.code}
</SyntaxHighlighter>
但是,无论我选择哪个主题,它都只会改变背景颜色和字体大小,而对文本颜色没有影响。
我认为 Package 器div上的'prose'类导致了这个问题。但是删除它也不起作用。
{/* <div className="prose prose-zinc font-display prose-h1:font-normal prose-code:mx-1 prose-code:before:content-none prose-code:after:content-none dark:prose-invert "> */}
<BlockContent
// Pass in block content straight from Sanity.io
blocks={singleBlog.body}
serializers={serializers}
/>
{/* </div> */}
有人有什么办法吗?
1条答案
按热度按时间8yparm6h1#
我不确定您是否使用自定义主题或使用众多选项中的一个。但如果您使用的是可用的主题,您可以在此处找到:https://react-syntax-highlighter.github.io/react-syntax-highlighter/demo/prism.html
那么可能是您的导入有问题。
如果我像这样导入主题(使用hljs):
import {dark} from "react-syntax-highlighter/dist/esm/styles/hljs";
我只得到背景颜色。如果我导入的主题像这样使用'棱镜'选项,我得到的文本颜色太:
import {dark} from "react-syntax-highlighter/dist/esm/styles/prism";
个