Step-by-Step Sanity Guide: Adding Code Blocks to Your Sanity + Next.js Blog

Part 1: Step-by-Step Sanity Guide: Setting Up Sanity.io with Next.js

Part 2: Step-by-Step Sanity Guide: Adding Code Blocks to Your Sanity + Next.js Blog

Introduction

Code blocks are essential for any technical blog. They allow you to share code snippets, configuration files, and terminal commands in a clean, readable format. In this guide, we'll walk through implementing beautiful, syntax-highlighted code blocks in your Sanity + Next.js blog.

What You'll Build

By the end of this tutorial, you'll have:

A custom code block schema in Sanity Studio
Syntax-highlighted code blocks on your frontend
Copy-to-clipboard functionality
Language-specific styling

Prerequisites

Before we start, make sure you have:

A working Sanity.io + Next.js blog setup. (Click here to see how to make one)
Basic knowledge of Next.js and Sanity.io schemas

Step 1: Create the Code Block Schema in Sanity

First, let's define a custom schema for code blocks in your Sanity Studio.

Create a new file src/sanity/schemaTypes/codeBlockType.tsx

src/sanity/schemaTypes/codeBlockType.tsx

import { CodeIcon } from "@sanity/icons";
import { defineType } from "sanity";

export const codeBlockType = defineType({
  name: "codeBlock",
  type: "object",
  title: "Code Block",
  icon: CodeIcon,
  fields: [
    {
      name: "language",
      type: "string",
      title: "Language",
      options: {
        list: [
          { title: "JavaScript", value: "javascript" },
          { title: "TypeScript", value: "typescript" },
          { title: "HTML", value: "html" },
          { title: "CSS", value: "css" },
          { title: "Python", value: "python" },
          { title: "Java", value: "java" },
          { title: "PHP", value: "php" },
          { title: "Ruby", value: "ruby" },
          { title: "C#", value: "csharp" },
          { title: "C++", value: "cpp" },
          { title: "Shell", value: "shell" },
          { title: "SQL", value: "sql" },
          { title: "JSON", value: "json" },
          { title: "Plain Text", value: "text" },
        ],
      },
      initialValue: "javascript",
    },
    {
      name: "filename",
      type: "string",
      title: "File Name",
      description: "Optional file name to display",
    },
    {
      name: "code",
      type: "text",
      title: "Code",
      rows: 10,
    },
  ],
  preview: {
    select: {
      language: "language",
      filename: "filename",
      code: "code",
    },
    prepare({ language, filename, code }) {
      const title = filename
        ? `${filename} (${language})`
        : `Code block (${language})`;
      const firstLine = code?.split("\n")[0];
      return {
        title: title,
        subtitle: firstLine,
      };
    },
  },
});

Step 2: Update Your Blog Post Schema

Next, add the code block to your blog post schema. Update your src/sanity/schemaTypes/blockContentType.ts file:

src/sanity/schemaTypes/blockContentType.ts

import { defineType, defineArrayMember } from "sanity";
import { ImageIcon } from "@sanity/icons";

/**
 * This is the schema type for block content used in the post document type
 * Importing this type into the studio configuration's `schema` property
 * lets you reuse it in other document types with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }
 */

export const blockContentType = defineType({
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    defineArrayMember({
      type: "block",
      // Styles let you define what blocks can be marked up as. The default
      // set corresponds 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 Portable Text Editor
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting
        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.
    defineArrayMember({
      type: "image",
      icon: ImageIcon,
      options: { hotspot: true },
      fields: [
        {
          name: "alt",
          type: "string",
          title: "Alternative Text",
        },
      ],
    }),
    defineArrayMember({
      type: "codeBlock",
    }),
  ],
});

Step 3: Register the Schema

Don't forget to register your new schema in the src/sanity/schemaTypes/index.ts file:

src/sanity/schemaTypes/index.ts

import { type SchemaTypeDefinition } from "sanity";

import { blockContentType } from "./blockContentType";
import { categoryType } from "./categoryType";
import { postType } from "./postType";
import { authorType } from "./authorType";
import { codeBlockType } from "./codeBlockType";

export const schema: { types: SchemaTypeDefinition[] } = {
  types: [blockContentType, categoryType, postType, authorType, codeBlockType],
};

Step 4: Add Code Block to Your Blog Body

Add a code block in Sanity Studio:

Open your Studio at http://localhost:3000/studio
Select a post
In the body section, click the Code block button (</>)
Fill in the required inputs (language, code, and file name)

Step 5: Install Frontend Dependencies

Now let's set up the frontend. Install the necessary packages:

terminal

npm i react-syntax-highlighter @types/react-syntax-highlighter

Step 6: Define the CodeBlock Type:

Start by adding a new type by creating the src/types/codeBlock.ts file

src/types/codeBlock.ts

export type CodeBlockType = {
  language: string;
  code: string;
  filename: string;
};

Step 7: Implement the CodeBlock Component:

Create a new component src/components/CodeBlock.tsx

codeBlock.tsx

"use client";
import { useState } from "react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { vscDarkPlus } from "react-syntax-highlighter/dist/cjs/styles/prism";
import { ClipboardIcon, CheckmarkIcon } from "@sanity/icons";
import { CodeBlockType } from "@/types/codeBlock";

type CodeBlockProps = CodeBlockType;
export default function CodeBlock({
  language = "text",
  code,
  filename,
}: CodeBlockProps) {
  const [copied, setCopied] = useState(false);

  const copyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error("Failed to copy code: ", err);
    }
  };

  return (
    <div className="my-6 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700">
      {/* Header */}
      <div className="flex items-center justify-between bg-gray-50 dark:bg-gray-800 px-4 py-2">
        <div className="flex items-center space-x-2">
          {filename && (
            <span className="text-sm text-gray-600 dark:text-gray-300 font-mono">
              {filename}
            </span>
          )}
        </div>

        <button
          onClick={copyToClipboard}
          className="flex items-center space-x-1 text-sm text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100 transition-colors"
          title="Copy to clipboard"
        >
          {copied ? (
            <CheckmarkIcon className="h-4 w-4 text-green-500" />
          ) : (
            <ClipboardIcon className="h-4 w-4" />
          )}
          <span>{copied ? "Copied!" : "Copy"}</span>
        </button>
      </div>

      {/* Code */}
      <div className="relative">
        <SyntaxHighlighter
          language={language}
          style={vscDarkPlus}
          customStyle={{
            margin: 0,
            borderRadius: 0,
            fontSize: "14px",
            lineHeight: "1.5",
          }}
          wrapLines
          showLineNumbers
          lineNumberStyle={{
            minWidth: "3em",
            paddingRight: "1em",
            color: "#6b7280",
            borderRight: "1px solid #374151",
            marginRight: "1em",
          }}
        >
          {code}
        </SyntaxHighlighter>
      </div>
    </div>
  );
}

Step 8: Update Your Portable Text Renderer:

Update the ProtableText component props in the src/components/blog.tsx file

src/components/blog.tsx

import { PostType } from "@/types/post";
import { PortableText } from "next-sanity";
import Image from "next/image";
import React from "react";
import CodeBlock from "./codeBlock";
import { CodeBlockType } from "@/types/codeBlock";

type CodeBlockProps = {
  value: CodeBlockType;
};

type BlogProps = {
  post: PostType;
};

export const Blog = ({
  post: {
    title,
    author,
    mainImage: { url, alt },
    body,
  },
}: BlogProps) => {
  return (
    <article className="flex flex-col gap-4">
      <h1 className="text-center text-4xl font-bold text-yellow-300">
        {title}
      </h1>
      <span className="self-end capitalize font-semibold">
        made by: <span className="text-orange-300">{author}</span>
      </span>
      <div className="relative aspect-[3/1.75]">
        <Image
          className="object-cover rounded-3xl"
          src={url}
          alt={alt}
          priority
          fill
        />
      </div>
      <PortableText
        value={body}
        components={{
          block: {
            normal: ({ children }) => (
              <p className="leading-7 sm:text-lg">{children}</p>
            ),
            h3: ({ children }) => (
              <h2 className="text-pink-300 font-semibold tracking-tight text-xl sm:text-3xl">
                {children}
              </h2>
            ),
          },
          list: {
            bullet: ({ children }) => (
              <ul className="sm:text-lg list-disc ml-6">{children}</ul>
            ),
          },
          listItem: {
            bullet: ({ children }) => (
              <li className="marker:font-bold">{children}</li>
            ),
          },
          types: {
            codeBlock: ({
              value: { language, code, filename },
            }: CodeBlockProps) => (
              <CodeBlock language={language} code={code} filename={filename} />
            ),
          },
        }}
      />
    </article>
  );
};

Step 9: Observe and Test the Results:

Run your Next.js project and check if the code block is rendered successfully

Make sure the copy to clipboard functionality works

Conclusion

You now have a fully functional code block system in your Sanity + Next.js blog! Your readers can enjoy syntax-highlighted code with copy functionality, and you can easily manage code snippets through Sanity Studio.

What You've Built

Advanced Sanity schema for code blocks with line numbering and Premium syntax highlighting.
Smart copy-to-clipboard with format preservation and success notifications.

The tutorial is designed to be beginner-friendly while including advanced features that make your code blocks professional and user-friendly. Each step includes complete code examples and explanations of what's happening.

Happy coding! 🚀

Part 1: Step-by-Step Sanity Guide: Setting Up Sanity.io with Next.js

Part 2: Step-by-Step Sanity Guide: Adding Code Blocks to Your Sanity + Next.js Blog