Get help on Discord

Code formatting plugin for Sanity block content

22 replies
Last updated: Jan 26, 2021
Are there any plugins/block-content addons to add 
code formatting
like here in
Slack

AI Update

Yes! There's an official plugin called @sanity/code-input that adds code formatting capabilities to Sanity Studio, similar to what you see in Slack's code blocks.

Installation

npm i @sanity/code-input

Setup

After installing, add it to your schema as a custom block type within your Portable Text array:

defineField({
  name: 'body',
  type: 'array',
  of: [
    { type: 'block' },
    { 
      type: 'code',
      options: {
        withFilename: true,        // Allow adding filename to code blocks
        highlightedLines: true     // Enable line highlighting
      }
    }
  ]
})

This gives your content editors a syntax-highlighted code editor right in the Studio where they can paste and format code snippets.

Rendering on the Frontend

When rendering the code blocks on your website, you'll need to handle the code type in your Portable Text serializers. Here's an example for React:

const components = {
  types: {
    code: ({value}) => (
      <pre data-language={value.language}>
        <code>{value.code}</code>
      </pre>
    )
  }
}

The plugin stores the code as structured data with properties like language and code, so you can enhance the rendering with any syntax highlighting library you prefer (like Prism.js or Highlight.js).

The @sanity/code-input plugin is maintained by the Sanity team and is widely used in the community for technical blogs, documentation sites, and any content that needs to display code snippets with proper formatting.

Show original thread
22 replies
I'm using @sanity/code-input and it's working pretty good
Thanks
user L
, but just to confirm - isn’t that plug-in an entirely separate field in the Sanity? I am wondering if there is a way to add that code formatting specifically inside the BlockContent field type.
Does it work there?
Yep, I installed it and a
I'm using it this way
{
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [
        { type: 'block' },
        { type: 'image' },
        { type: 'table' },
        { type: 'code' },
      ],
    },
And when I wanna add a code block it shows like this:
And this is how the code block is shown in the content
I'd also want to use this for my project, thanks for sharing!
Awwwwwww snap, you are a fantastic person
user L
- thank you!
user L
I have another question regarding this plugin. I'm currently using block-content-to-react, what would be the serializer to allow code blocks?
*serializer config
Did you try using something like this?
const serializers = {
  types: {
    code: props => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    )
  }
}
No I didn't, I'll try that out
Ok, let me know if it helps
It does work, but I am having an issue with linting errors and I'm not sure how to solve this
create a component outside with this
props => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    )
something like this

const MyFancyCodeSerializer = props => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    )
then add the component like this

const serializers = {
  types: {
    code: MyFancyCodeSerializer
  }
}
It should work
🤔
I'll try it out 👍. I'm also using typescript, so I'll fill the types in myself
Great, let me know it this helps with eslint.
Worked perfectly
Here's my TS code for reference
type CodeProps = {
  node: {
    language: string;
    code: string;
  };
};

export function CodeSerializer(props: CodeProps) {
  return (
    <pre data-language={props.node.language}>
      <code>{props.node.code}</code>
    </pre>
  );
}

const serializers = {
  types: {
    code: CodeSerializer
  }
};
Nice, I'm glad it worked 😄. The issue was that eslint was rejecting the component as it was a anonymous function

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?