Implementing Code Input & Highlighting in Next JS Sanity Blog - Typescript

Adding code blocks to your NextJS Blog

After starting to build your dev blog using Next JS and Sanity you want the most critical thing to have on a dev blog - support for code blocks.
Lets get started and implement it to the blog

Install Code Input in Sanity
Sanity has an official plugin to insert and use Code Blocks
Navigate to your sanity directory and install the plugin

sanity install @sanity/code-input

Add the Code Object
Assuming you want to add code inputs to your body add the following lines in blockContent.js in the end after the image section, located at sanity/schemas/blockContent.js as follows:

{
      type: 'code',
      title : 'Code Block'
}

After adding the above lines your blockContent.js should look like

{
      type: 'image',
      options: {hotspot: true},
},
{
      type: 'code',
      title : 'Code Block'
}

Restart your Sanity Server once for the changes to take place

We have completed setting up our Sanity Studio and now you can enter code blocks. Now lets set up code highlighting for our Frontend.
Start by installing the required packages to your NextJS project

npm i --save @sanity/block-content-to-react
npm i react-syntax-highlighter

I would suggest not to use React Portable Text Package as it causes conflicts, @sanity/block-content-to-react does the same thing and makes it easy to display and edit code blocks.

Modify your post display page as follows:
Import Sanity Block Content and React Syntax Highlighter

const BlockContent = require('@sanity/block-content-to-react')
import SyntaxHighlighter from 'react-syntax-highlighter';

If you face errors like "Could not find a declaration file for module 'react-syntax-highlighter'", run the following command in your project directory

npm i --save @types/react-syntax-highlighter

Create the serializer for code blocks as follows:

const serializers = {
    types: {
        code: (props: any) => (
            <div className='my-2'>
                <SyntaxHighlighter language={props.node.language}>
                    {props.node.code}
                </SyntaxHighlighter>
            </div>
        ),
    },
}

Now you should end up with something like this:

import { GetStaticProps } from 'next';
import { sanityClient, urlFor } from '../../sanity'
import { Posts } from '../../typings';
import Header from '../../components/Header'
const BlockContent = require('@sanity/block-content-to-react')
import SyntaxHighlighter from 'react-syntax-highlighter';

interface Props {
    post: Posts
}
const serializers = {
    types: {
        code: (props: any) => (
            <div className='my-2'>
                <SyntaxHighlighter language={props.node.language}>
                    {props.node.code}
                </SyntaxHighlighter>
            </div>
        ),
    },
}

Finally use Sanity Block Content to display your body

<BlockContent
        blocks={post.body}
        projectId="xxxxxxxx"
        dataset="production"
        serializers={serializers}
/>

You are now all set to insert code blocks to your dev blog with syntax highlighting 🔥🚀

Comments

[emmanz95]

Thank you for this post, this was a much needed article, I was going to give up on this feature for my new blog app. So thank you very much!