DEV Community

Cover image for Implementing Code Input &  Highlighting in Next JS Sanity Blog - Typescript
Hosenur Rahaman
Hosenur Rahaman

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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'
}
Enter fullscreen mode Exit fullscreen mode

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

{
      type: 'image',
      options: {hotspot: true},
},
{
      type: 'code',
      title : 'Code Block'
}
Enter fullscreen mode Exit fullscreen mode

Restart your Sanity Server once for the changes to take place

Image description
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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
        ),
    },
}
Enter fullscreen mode Exit fullscreen mode

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>
        ),
    },
}
Enter fullscreen mode Exit fullscreen mode

Finally use Sanity Block Content to display your body

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

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

Image description

Latest comments (1)

Collapse
 
emmanuelokuchukwu profile image
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!