Adding Code Blocks to Sanity Studio

Sanity provides the flexibility of adding new schema types or updating existing types since it is an open-source CMS. Showing code blocks is absolutely important for a developer blog. Like every developer, I was looking for a solution to make syntax highlighting for my posts. To add code blocks, firstly we have to install code-input plugin from Sanity according to the official instructions.

After the installation, we have to find blockContent.js file and put this type definition at the end of the array:

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

Now we have defined a new schema type for block content schema. After that simple modification, "Insert Code Block" option will appear inside of editor, as you can see below:

Now we can add simple code blocks. It works! For a more beautiful view in our code blocks, I recommend using react-syntax-highlighter for styling.