Navigate to your Sanity project directory.

Run the following command to install the Code Input plugin:


Assuming you want to add code inputs to the body of your blog, add the following lines at the end of the file, after the image section:

Restart your Sanity server to apply the changes made to the schema.

4. Install Required Packages in Next.js Project


In your Next.js project directory, run the following commands to install the required packages:


Define the serializer for code blocks in the `[slug].jsx` file:

7. Use Sanity Block Content to Display the Body

Replace the corresponding section in the 

 file with the following code to display the body content with code blocks:

8. Now you should end up with something like this:

Congratulations! You have successfully implemented code input and highlighting in your Next.js Sanity blog. Now you can add code blocks with syntax highlighting to your developer blog. Happy coding!

StackyBytes

Implementing Code Input & Highlighting in Next.js Sanity Blog