๐Ÿ”ฎ Sanity Create is here. Writing is reinvented. Try now, no developer setup

Text Highlighting Decorator is not being Applied in the Front End

1 replies
Last updated: Apr 5, 2021
user G
Hi, I have built a blog using your tutorial: Build your first blog using React. After that, I have added a decorator for highlighting text. [Highlighted text will have a background color of yellow]. In the portable text editor, whenever I highlight any text, the background color becomes yellow, as expected. However, in the frontend, the highlighting is not applied. What do I need to do? I have been struggling with this for the last two days. Pls help me here. The code snippets are as follows:

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import sanityClient from "../client.js";
import BlockContent from "@sanity/block-content-to-react";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { coldarkDark } from "react-syntax-highlighter/dist/esm/styles/prism";

export default function OnePost() {
  const [postData, setPostData] = useState(null);
  const { slug } = useParams();

  const serializers = {
    types: {
      code: (props) => (
            padding: "0 5px 0 0",
            fontSize: 14,
            borderRight: "1.5px solid darkgray",
            marginRight: "10px",

  useEffect(() => {
        `*[slug.current == $slug]{
        "name": author->name,
        "authorImage": author->image
        { slug }
      .then((data) => setPostData(data[0]))
  }, [slug]);

  if (!postData) return <div>Loading...</div>;

  return (
    <div className="col-11 col-sm-10 col-md-6 mx-auto mt-5">
        <h1 className="font-weight-bold">{postData.title}</h1>
          <h6 className="text-secondary">{postData.name}</h6>
      <div className="text-muted">

import React from "react";

 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'blockContent'
 *  }

const highlightRender = (props) => (
  <span style={{ backgroundColor: "yellow" }}>{props.children}</span>

export default {
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
      title: "Block",
      type: "block",
      // Styles let you set what your user can mark up blocks with. These
      // correspond with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "Quote", value: "blockquote" },
      lists: [{ title: "Bullet", value: "bullet" }],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property โ€“ e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
            title: "Highlight",
            value: "highlight",
            blockEditor: {
              icon: () => "H",
              render: highlightRender,
        // Annotations can be any object structure โ€“ e.g. a link or a footnote.
        annotations: [
            title: "URL",
            name: "link",
            type: "object",
            fields: [
                title: "URL",
                name: "href",
                type: "url",
                title: "Open in new tab",
                name: "blank",
                description: "Read <https://css-tricks.com/use-target_blank/>",
                type: "boolean",
    // You can add additional types here. Note that you can't use
    // primitive types such as 'string' and 'number' in the same array
    // as a block type.
      type: "image",
      options: { hotspot: true },

      type: "code",
Apr 3, 2021, 6:25 AM
user T
I replied to your thread in help. Please let me know if serializing your highlighted text is still not working after that.
Apr 5, 2021, 5:59 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?