👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

How to visually format custom styles in Sanity's block content/richtext editor field.

9 replies
Last updated: May 20, 2020
I'm adding a custom style to a block content/richtext editor field and was trying to find out how I can format the text in the editor to reflect the different style visually in order for editors to "get it". There's no mention of that in the docs over at https://www.sanity.io/docs/configuration so I was wondering - is it actually possible?
Apr 9, 2020, 3:26 PM
For reference, I added an object to the styles array:
styles: [
...
        { title: 'Lead', value: 'lead' },
...
]
..and I'd like to make that font just a tad larger. If there's no visual change, it makes it harder for editors to understand what's going on and kinda kills the WYSIWYG experience.
Apr 9, 2020, 3:27 PM
anyone?
Apr 14, 2020, 3:19 PM
Same question here. Did you figure out a way to do this?
May 19, 2020, 2:13 PM
I want to have a “heading” style, and perhaps make it bold or slightly larger in the rich text editor in Sanity studio (without using h1-6 tag specifically)
May 19, 2020, 2:23 PM
{ name: ‘body’,
title: ‘Body’,
type: ‘array’,
of: [
{
type: ‘block’,
styles: [
{ title: ‘Normal’, value: ‘normal’ },
{ title: ‘Heading’, value: ‘heading’ }
],
marks: {
decorators: [
{ title: ‘Strong’, value: ‘strong’ },
{ title: ‘Emphasis’, value: ‘em’ }
]
}
}
]

}
May 19, 2020, 2:23 PM
Maybe you know,
user J
?
May 19, 2020, 2:24 PM
I haven't tried this myself, but is this helpful? https://www.sanity.io/docs/customization#block-styles-14d3f8b767ae
May 19, 2020, 2:27 PM
Oh, fantastic, thanks
user J
!
May 19, 2020, 2:32 PM
Ah, thanks for resurrecting this thread, hehe
May 20, 2020, 2:38 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.

Was this answer helpful?