Built React app with Sanity Studio, I have customized text editor in Sanity Studio to have code blocks. I installed both LaTex and Table plugin from Sanity documentation. Below I have added the blocks:
{
name: 'Table',
title: 'Size Chart',
type: 'table', // Specify 'table' type
},
{
type: 'image',
options: {hotspot: true},
},
{ type: 'latex', title: 'Inline math' },
{ type: 'latex', name: 'anotherAuthor', title: 'Math block' },
{
type: 'code'
}
This results in being able to add Code / LaTex / and tables in Sanity Studio. For the frontend of react I created a serializer type for code:
const serializers = {
types: {
code: (props) => (
<SyntaxHighlighter
language={props.node.language}
style={coldarkDark}
showLineNumbers
lineNumberStyle={{
padding: "0 5px 0 0",
fontSize: 14,
borderRight: "1.5px solid darkgray",
marginRight: "10px",
}}
>
{props.node.code}
</SyntaxHighlighter>
),
}
};
This results in Syntax appearing for code blocks when I run the app on the Reach side, however I can't figure out how to properly declare serializers for either LaTex or Table and they are currently showing up blank on my site. Any ideas?