We built a complete blog with Sanity but don’t have support for code input and syntax highlight.
So, today we will integrate code input and syntax highlight on our blog.
Let’s get started.
Install the package
To enable code input on Sanity Studio install the sanity/code-input package
npm install @sanity/code-input
or
yarn add @sanity/code-input
For syntax highlight install react-syntax-highlighter
npm install react-syntax-highlighter
or
yarn add react-syntax-highlighter
Add the plugin
Once the installation is complete, add the plugin to the sanity.config.ts file.
import { codeInput } from "@sanity/code-input";
const config = defineConfig({
//..
plugins: [structureTool(), codeInput()],
schema: { types: schemas },
});
export default config;
Update the Schema
To enable code code input we need to update the BlockContent Schema.
Open up blockContent.ts file from sanity→schemas and add the Code Block schema in the array.
const blockContent = {
title: "Block Content",
name: "blockContent",
type: "array",
of: [
...
{
type: "code",
name: "code",
title: "Code Blocks",
options: {
languageAlternatives: [
{ title: "", value: "" },
{ title: "Javascript", value: "javascript" },
{ title: "HTML", value: "html" },
{ title: "CSS", value: "css" },
{ title: "React", value: "react" },
{ title: "Node", value: "node" },
{ title: "MySql", value: "mysql" },
{ title: "ZH", value: "zh", mode: "sh" },
],
withFilename: false,
},
},
],
};
export default blockContent;
This will enable the code block option on the block content editor.
Now you can add code snippets to your blog posts.
To add a code snippet click the Code Blocks button and enter your code.
Choose the language from the drop-down menu. Once you are done, close the modal, which will save the code snippet.
We have the code snippet on the post body, but it will not appear on the post because the code snippet is unknown to the RenderBodyContent component.
We have to update the RenderBodyContent component to render the code snippet.
Update RenderBodyContent component
To render the code snippet import these on top of the file.
import SyntaxHighlighter from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";
Then create the Code component as shown below:
const Code = ({ value }: any) => {
return (
<div className="my-10">
<SyntaxHighlighter language={value.language} style={dracula}>
{value.code}
</SyntaxHighlighter>
</div>
);
};
Finally, update the components with code components.
const components = {
types: {
image: ImageComponent,
code: Code,
},
};
This will generate the code snippet on the post.
This is how it looks:
If you want to change the theme you can do that very easily.
Just import the theme of your choice and update the style.
import { dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
const Code = ({ value }: any) => {
return (
<div className="my-10">
<SyntaxHighlighter language={value.language} style={dark}>
{value.code}
</SyntaxHighlighter>
</div>
);
};
You can find themes from here:
Themes: react-syntax-highlighter
Check out this repo for more information on syntax highlighter
GitHub - react-syntax-highlighter/react-syntax-highlighter
Resources:
Conclusion
In this tutorial, we successfully integrated code blocks with syntax highlighting into our Sanity-powered blog. I hope you found the guide helpful and informative.
If there's a specific topic you'd like to see covered in the next article, feel free to share your suggestions. I'm always open to feedback and new ideas!
Connect With Me
Twitter/x
Happy Coding.
Top comments (0)