guys I need some help regarding styling my sanity content, So the issue is I'm trying to style the code block, but I'm not able to do so, when I style other items like h1, h2, h3, etc. then the code block disappers and If I'm styling code block then the other items are not styled.
I'm using @sanity/block-content-to-react, SyntaxtHighlighter and highlight.js. Here's my code:
Main Code
<BlockContent
className="blog__body"
dataset={import.meta.env.VITE_SANITY_DATASET}
projectId={import.meta.env.VITE_SANITY_PROJECT_ID}
blocks={blog.body}
serializers={serializers}
/>
Serializers
const serializers = {
types: {
code: CodeBlock,
},
block: (props) => {
switch (props.node.style) {
case "h1":
return <Heading1>{props.children}</Heading1>;
case "h2":
return <Heading2>{props.children}</Heading2>;
case "h3":
return <Heading3>{props.children}</Heading3>;
case "h4":
return <Heading4>{props.children}</Heading4>;
case "h5":
return <Heading5>{props.children}</Heading5>;
case "h6":
return <Heading6>{props.children}</Heading6>;
default:
return <NormalText>{props.children}</NormalText>;
}
},
listItem: (props) => {
switch (props.node.listItem) {
case "bullet":
return <UnorderedList>{props.children}</UnorderedList>;
case "number":
return <OrderedList>{props.children}</OrderedList>;
default:
return <li>{props.children}</li>;
}
},
marks: {
link: Link,
},
};
Fetching Data from sanity -
const { slug } = useParams();
const [blog, setBlog] = useState(null);
const publishedTime = timeDifference(
new Date(),
new Date(blog?.publishedAt)
);
useEffect(() => {
client
.fetch(
`*[_type == "post" && slug.current == $slug]{
_id,
title,
body,
publishedAt,
categories[]->{
title
},
author->{
name,
avatar
},
publishedAt,
mainImage{
asset->{
_id,
url
},
alt
},
}[0]`,
{ slug }
)
.then((data) => {
if (data.length === 0) {
console.error(`No post found with slug "${slug}"`);
return;
}
setBlog(data);
})
.catch(console.error);
}, [slug]);
`
codeblock styling
function CodeBlock({ node }) {
return (
<SyntaxHighlighter
language="javascript"
style={atomDark}
showLineNumbers
>
{node.code}
</SyntaxHighlighter>
);
}
Sorry if I did any mistakes but I'm asking first time here, please help.
I'm looking to solve my problem that I'm facing from a long time now, I was using sanity to display me blogs but I'm not able to style my code blocks, It would be really helpful if someone can help me.
