How to render decorator highlighting styles in React frontend?

The issue is that creating a custom decorator in Sanity Studio only adds the visual styling in the editor itself - it doesn't automatically render that styling on your frontend. You need to explicitly tell your React frontend how to render that custom decorator.

When you create a decorator (like highlighting), Sanity stores it as a "mark" in the Portable Text data. To display it with the yellow background on your frontend, you need to add a custom serializer/component for that mark.

If you're using the modern @portabletext/react library:

import { PortableText } from '@portabletext/react'

const components = {
  marks: {
    highlight: ({children}) => (
      <span style={{backgroundColor: 'yellow'}}>{children}</span>
    ),
  },
}

// In your component
<PortableText value={yourContent} components={components} />

If you're using the older @sanity/block-content-to-react library:

import BlockContent from '@sanity/block-content-to-react'

const serializers = {
  marks: {
    highlight: ({children}) => (
      <span style={{backgroundColor: 'yellow'}}>{children}</span>
    ),
  },
}

// In your component
<BlockContent blocks={yourContent} serializers={serializers} />

The key is that the mark name in your serializer (highlight in the examples above) must match the value you specified when defining the decorator in your Sanity schema.

If you're using the older library, note that @sanity/block-content-to-react is deprecated and you should migrate to @portabletext/react for new projects. The main difference is that the new library uses a components prop instead of serializers, and accesses node data through value instead of node.