Implementing a sanity.io code input in Create react app
This project helps beginners working with react to learn how to add code input to their rich text field and also highlight it.
Hi everyone, in this article, we re going to be learning how to implement a code-input while working with sanity.io , a backend headless CMS and Create react app.
Through this article, i hope to help fellow developers working with sanity.io understand how to highlight their rich text-field and make it look nice.
First of all, we re going to look at how to install the plugin from sanity.io, and add it to the rich text-field.
There is a plugin that can be installed from sanity.io/plugins called code-input, let us copy the installation command "sanity install @sanity/code-input", and run it on our Vs code terminal after navigating into our studio folder with "cd studio". If the plugin installs successfully, we will see "@sanity/code-input" added to our plugins array at sanity.json file. We will navigate back into our root folder and then restart our project with npm start.
This doesn't change anything yet in our rich text-field because the code type has not been added. Now we will go to our studio folder, further to schemas folder, and then to post.js file and check our body type.
name:'body',
title:'Body',
type:'blockContent',
},
As you can see from the above code, body is defined with type blockContent in our project. Sometimes, it can be portable text, we now have to find the file where the body type is defined in our schemas folder and open it, scroll down to the bottom where we get the image type.
{
type:'image',
options:{hotspot:true},
}
],
}
Now, we will add a custom block type called code just after the image type and save.
{
type:'image',
options:{hotspot:true},
},
{
type:"code",
title:"code editor"
}
],
}
You will now observe the + sign at the top right corner, just before the arrows pointing away from each other in our rich text field has our code editor, which is the title given to block type. The code editor has languages you can choose from in the language dropdown.
Now we have the input in place, we have to go over to the next, which is outputting the code block into our front-end in Create react app.
At this juncture , we will notice that our front-end crashed with "Error: unknown block type 'code', please specify a serializer for it in the serializers types prop".
To fix this, we need to go back to our root folder, then to the file where our single post is displayed, and then add serializers to our blockContent or portable-text as the case may be. Serializers are the recipes to how we deal with custom block types.
We will create a serializers file in the src folder, and then import it into our single post the following way.
importReactfrom'react'
const serializers ={
types:{
code:props=><pre><code>{props.node.code}</code></pre>
}
}
exportdefault serializers
This resolves the error gotten in our front-end, but it will be good to add a syntax highlighter that will make our code look awesome. There are many good react highlight components online, but in this article we will be using react-syntax-highlighter, scroll down and copy the installation command "npm install react-syntayntax-highlighter --save", We will now go into our root folder and run the command in our terminal, then restart our project after the installation is done.
we will now need to import the syntax highlighter and replace the code with the one below to get the highlight.
importReactfrom'react'
importSyntaxHighlighterfrom'react-syntax-highlighter';
const serializers ={
types:{
code:({node ={}})=>{
const{ code, language }= node if(!code){
return null
}
return<SyntaxHighlighter language={language ||'text'}>
{code}
</SyntaxHighlighter>
}
}
}
exportdefault serializers
That's it, feel free to add code-input and highlights to your rich text-field.
Sanity – build remarkable experiences at scale
Sanity Composable Content Cloud is the headless CMS that gives you (and your team) a content backend to drive websites and applications with modern tooling. It offers a real-time editing environment for content creators that’s easy to configure but designed to be customized with JavaScript and React when needed. With the hosted document store, you query content freely and easily integrate with any framework or data source to distribute and enrich content.
Sanity scales from weekend projects to enterprise needs and is used by companies like Puma, AT&T, Burger King, Tata, and Figma.