Company logo
  • Jobs
  • Bootcamp
  • About Us
  • For professionals
    • Home
    • Jobs
    • Courses
    • Questions
    • Teachers
    • Bootcamp
  • For business
    • Home
    • Our process
    • Plans
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Calculator

0

54
Views
Trouble with Serializers for LaTex and Tables in Sanity Studio - not appearing in frontend of React app

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?

7 months ago ยท Juan Pablo Isaza
Answer question
Find remote jobs