Unable to add code blocks in Sanity CMS after I install the code-input plugin

Question

I am learning to build a blog using Sanity CMS and React. I am new to Sanity.

I should be able to insert code snippets in my blog posts. So, I have installed the code-input plugin.

According to the link here, after I install the plugin I have to use the following code in my schema types. I have no idea where do I insert the code.

Please help.

My folder structure is as follows:

sanityblog/blockContent.js

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */
export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [{ title: "Bullet", value: "bullet" }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    },
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
    {
      type: "image",
      options: { hotspot: true },
    },
  ],
};

sanityblog/schema.js

// First, we must import the schema creator
import createSchema from "part:@sanity/base/schema-creator";

// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:@sanity/base/schema-type";

// We import object and document schemas
import blockContent from "./blockContent";
import category from "./category";
import post from "./post";
import author from "./author";

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: "default",
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    // The following are document types which will appear
    // in the studio.
    post,
    author,
    category,
    // When added to this list, object types can be used as
    // { type: 'typename' } in other document schemas
    blockContent,
  ]),
});

Answer 1

If you installed the plugin correctly, it's now available as a schema type to be used in any of your other schemas. So, to answer your question, you can put that code anywhere you want code blocks in your Sanity studio. I'd strongly suggest going over the content modelling documentation 😉

Specifically to your question, assuming you use the sanityBlog/blockContent.js field for the content of your posts, you can add it there. Here's how that would look like:

export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      // ...annotations, styles, lists and marks you already have
    },
    {
      type: "image",
      options: { hotspot: true },
    },
    // Add the code block here 👇
    // it'll show up as one of the blocks available in your
    // Portable Text Editor
    {
      type: "code",
      title: "Code block",
    }
  ],
};

For specifics on the portable text / rich content field (type: "block"), refer to the block type documentation. If you want to take it one step back, refer to the general block content documentation.

Hope this helps 🙌