DEV Community

Cover image for Integrating Code Blocks with Syntax Highlighting in Sanity Blogs
Amrin
Amrin

Posted on • Originally published at coderamrin.com

Integrating Code Blocks with Syntax Highlighting in Sanity Blogs

We built a complete blog with Sanity but don’t have support for code input and syntax highlight.

So, today we will integrate code input and syntax highlight on our blog.

Let’s get started.

Install the package

To enable code input on Sanity Studio install the sanity/code-input package

npm install @sanity/code-input

or

yarn add @sanity/code-input
Enter fullscreen mode Exit fullscreen mode

For syntax highlight install react-syntax-highlighter

npm install react-syntax-highlighter

or

yarn add react-syntax-highlighter 
Enter fullscreen mode Exit fullscreen mode

Add the plugin

Once the installation is complete, add the plugin to the sanity.config.ts file.


import { codeInput } from "@sanity/code-input";

const config = defineConfig({
  //..
  plugins: [structureTool(), codeInput()],
  schema: { types: schemas },
});

export default config;

Enter fullscreen mode Exit fullscreen mode

Update the Schema

To enable code code input we need to update the BlockContent Schema.

Open up blockContent.ts file from sanity→schemas and add the Code Block schema in the array.

const blockContent = {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    ...

    {
      type: "code",
      name: "code",
      title: "Code Blocks",
      options: {
        languageAlternatives: [
          { title: "", value: "" },
          { title: "Javascript", value: "javascript" },
          { title: "HTML", value: "html" },
          { title: "CSS", value: "css" },
          { title: "React", value: "react" },
          { title: "Node", value: "node" },
          { title: "MySql", value: "mysql" },
          { title: "ZH", value: "zh", mode: "sh" },
        ],
        withFilename: false,
      },
    },
  ],
};
export default blockContent;

Enter fullscreen mode Exit fullscreen mode

This will enable the code block option on the block content editor.

code block enabled on blog

Now you can add code snippets to your blog posts.

To add a code snippet click the Code Blocks button and enter your code.

Choose the language from the drop-down menu. Once you are done, close the modal, which will save the code snippet.

adding code snippet preview

We have the code snippet on the post body, but it will not appear on the post because the code snippet is unknown to the RenderBodyContent component.

We have to update the RenderBodyContent component to render the code snippet.

Update RenderBodyContent component

To render the code snippet import these on top of the file.

import SyntaxHighlighter from "react-syntax-highlighter";
import { dracula } from "react-syntax-highlighter/dist/esm/styles/hljs";
Enter fullscreen mode Exit fullscreen mode

Then create the Code component as shown below:

const Code = ({ value }: any) => {
  return (
    <div className="my-10">
      <SyntaxHighlighter language={value.language} style={dracula}>
        {value.code}
      </SyntaxHighlighter>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

Finally, update the components with code components.

const components = {
  types: {
    image: ImageComponent,
    code: Code,
  },
};
Enter fullscreen mode Exit fullscreen mode

This will generate the code snippet on the post.

This is how it looks:

rendered code snippet

If you want to change the theme you can do that very easily.

Just import the theme of your choice and update the style.

import { dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
Enter fullscreen mode Exit fullscreen mode
const Code = ({ value }: any) => {
  return (
    <div className="my-10">
      <SyntaxHighlighter language={value.language} style={dark}>
        {value.code}
      </SyntaxHighlighter>
    </div>
  );
};
Enter fullscreen mode Exit fullscreen mode

You can find themes from here:

Themes: react-syntax-highlighter

Check out this repo for more information on syntax highlighter

GitHub - react-syntax-highlighter/react-syntax-highlighter

Resources:

Conclusion

In this tutorial, we successfully integrated code blocks with syntax highlighting into our Sanity-powered blog. I hope you found the guide helpful and informative.

If there's a specific topic you'd like to see covered in the next article, feel free to share your suggestions. I'm always open to feedback and new ideas!

Connect With Me
Twitter/x

Github

LinkedIn

Happy Coding.

Top comments (1)

Collapse
 
bitwizcoder profile image
Muhammad Noman

Thank you