Skip to content
Get help on Slack

Adding code formatting plugin to BlockContent field type in Sanity.io

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

Jan 26, 2021, 3:56 PM
I'm using @sanity/code-input and it's working pretty good
Jan 26, 2021, 3:59 PM
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.
Jan 26, 2021, 4:05 PM
Does it work there?
Jan 26, 2021, 4:05 PM
Yep, I installed it and a
Jan 26, 2021, 4:06 PM
I'm using it this way
Jan 26, 2021, 4:06 PM
{
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [
        { type: 'block' },
        { type: 'image' },
        { type: 'table' },
        { type: 'code' },
      ],
    },
Jan 26, 2021, 4:07 PM
And when I wanna add a code block it shows like this:
Jan 26, 2021, 4:08 PM
And this is how the code block is shown in the content
Jan 26, 2021, 4:10 PM
I'd also want to use this for my project, thanks for sharing!
Jan 26, 2021, 5:00 PM
Awwwwwww snap, you are a fantastic person
user L
- thank you!
Jan 26, 2021, 5:07 PM
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?
Jan 26, 2021, 5:45 PM
*serializer config
Jan 26, 2021, 5:45 PM
Did you try using something like this?
const serializers = {
  types: {
    code: props => (
      <pre data-language={props.node.language}>
        <code>{props.node.code}</code>
      </pre>
    )
  }
}
Jan 26, 2021, 5:49 PM
No I didn't, I'll try that out
Jan 26, 2021, 5:49 PM
Ok, let me know if it helps
Jan 26, 2021, 5:49 PM
It does work, but I am having an issue with linting errors and I'm not sure how to solve this
Jan 26, 2021, 9:41 PM
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
🤔
Jan 26, 2021, 9:58 PM
I'll try it out 👍. I'm also using typescript, so I'll fill the types in myself
Jan 26, 2021, 10:04 PM
Great, let me know it this helps with eslint.
Jan 26, 2021, 10:09 PM
Worked perfectly
Jan 26, 2021, 10:27 PM
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
  }
};
Jan 26, 2021, 10:27 PM
Nice, I'm glad it worked 😄. The issue was that eslint was rejecting the component as it was a anonymous function
Jan 26, 2021, 10:36 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?