Implementing Code Input & Highlighting in Next JS Sanity Blog - Typescript
Tags: sanity, blog, nextjs
Published: 2022-02-13 16:32:14

## 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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s7paup6au8qcz16d5if.PNG)
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 🔥🚀


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ajjsdt0vskmkru2fc6f.PNG)