How to format code snippets with <pre> tags using Contentful's rich-text-react-renderer?

Question

I'm using Contenful as CMS for my Gatsby site. In the configuration for their rich-text-react-renderer, I'm trying to have all code in the rich text field wrapped in a <pre> tag, so as to maintain all the formatting and to add my own styling.

Here's what I tried:

const Blog = (props) => {
  const Code = ({children}) => <pre><code style={{backgroundColor: "red"}}>{children}</code></pre>
  const options = {
   renderMark: {
      [MARKS.CODE]: code => <Code>{code}</Code>},
  }
}

The problem is that Contentful will wrap every line of code snippet inside paragraph tags when I select 'normal text', which isn't valid HTML (<pre> tags can't be direct descendants of <p> tags) and messes up all my formatting.

Does anyone know how to override that behavior or a workaround that will render properly formatted code snippets sourced from Contentful in Gatsby?

Answer 1

Contentful DevRel here 👋🏼

There have been tickets submitted to wrap <code> tags in <pre> tags, so the feature may be available soonish, in the meantime, the way I've found around this is to create a separate content type for code blocks, and embed those as entries in the Rich Text field editor.

In the Code Block content type, I added the fields description (to help me identify it), language (for styling with e.g. Prism) and code (with type markdown).

Here's a screenshot of the Code Block content type in the Contentful UI

Then, using the @contentful/rich-text-react-renderer which comes with the gatsby-source-contentful/rich-text plugin, I create a bespoke options function that parses the linked entries to pass into the renderRichText function, that renders the code block as an embedded entry with the HTML I need.

Here is a screenshot of the embedded Code Block entries in the Contentful Rich Text editor

Here is the GraphQL query which fetches the Code Block as linked references:

query pageQuery($id: String!) {
  contentfulBlogPost(id: { eq: $id }) {
    title
    slug
    # This is the rich text field
    bodyRichText {
      raw
      references {
        ... on ContentfulCodeBlock {
          contentful_id
          __typename
          description
          language
          code
        }
      }
    }
  }
}

Here is the code that renders the Code Block inline with the HTML using the renderRichText function:

import { BLOCKS, INLINES, MARKS } from "@contentful/rich-text-types"
import { renderRichText } from "gatsby-source-contentful/rich-text"

const options = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node) => {
        const { __typename } = node.data.target;
        switch (__typename) {
          case "ContentfulCodeBlock":
            const { language, code } = node.data.target;
            return (

               // add your custom <pre> tags here

               <pre className={language}}>
                 <code>{code}</code>
               </pre>
            );
          default:
            return null;
        }
      },
  },
}

// render it
renderRichText(post.richText, options)

Answer 2

I haven't used the rich-text-react renderer but I had the same problem with the rich-text-html-renderer (in a node application). Unfortunately the <pre> tag is not available as a rich text block so it will always be rendered as a code block inside a paragraph. I solved this by catching the paragraph block in the renderer-options and render the block as <pre> if it is the only content inside that paragraph and it is of type "code" (I use lodash to check since node.content[0].marks is an array instead of object). Not the most elegant solution but it works..

[BLOCKS.PARAGRAPH]: (node: any, next: Next) => {
    if (node.content.length === 1 && _.find(node.content[0].marks, {type: 'code'})) {
        return `<pre>${node.content[0].value}</pre>`;
    }

    // else return content as it is
    return `<p>${next(node.content)}</p>`;
},

Answer 3

I'm using TailwindCSS in a NEXT JS Project. The details object is the RichText field type coming from API request from Contentful. Document to React Component package didn't work to display inline assets such as images. That's why I'm using @madebyconnor/rich-text-to-jsx:

import { MARKS } from '@contentful/rich-text-types';
import RichText from '@madebyconnor/rich-text-to-jsx';

<RichText
        richText={details} //details is the richtext field type coming from contentful
        overrides={{
           [MARKS.CODE]: (node) => {
               return <div className="px-6 py-3 my-4 bg-gray-500 text-blue-300 font-mono rounded-lg">{node.children}</div>
               }
        }}
/>

Answer 4

use BLOCK.CODE in renderMark option.

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";

export const options = {
  renderMark: {
    [MARKS.CODE]: code,
  },

  renderText: (text) => {
    return text.split("\n").reduce((children, textSegment, index) => {
      return [...children, index > 0 ? <br key={index} /> : "", textSegment];
    }, []);
  },
};

function code(text) {
  text.shift(); // for empty
  const language = text.shift();

  const value = text.reduce((acc, cur) => {
    if (typeof cur !== "string" && cur.type === "br") {
      return acc + "\n";
    }

    return acc + cur;
  }, "");

  return (
      <SyntaxHighlighter language={language} style={tomorrow}>
        {value}
      </SyntaxHighlighter>
  );
}

• contentful content

javascript // language information
const a = 10;
function test(args){
  const b = 10;
  let c = "test"

  return b;
}