Shane Chaffe

1 min read ⏳

Fortunately, this is quite an easy process when it comes to rendering code, this assumes you'll be using Rich Text to do so as that would be a pre-requisite to achieving the desired outcome.

What do I need?

• A rich text field within Contentful

• Install react-syntax-highlighter

• Prepare to configure your Rich Text Options file at a code level

How do I implement it?

Assuming you have done 1 and 2, you'll need to handle this at a code level. The way I handle this is by referencing a content type in my Rich Text field in Contentful, this way I know I have a code block and have reusability of content. By looking at some code, we can achieve the desired outcome by writing something like this:

[BLOCKS.EMBEDDED_ENTRY]: (node: any, children: any) => {
      // node.data.fields holds description, language, code
      const { codeSnippet, language } = node.data.target.fields;
      return (
        <SyntaxHighlighter style={vscDarkPlus} language={language} customStyle={{ marginTop: "20px", marginBottom: "20px" }}>
          {codeSnippet}
        </SyntaxHighlighter>
      );
    },

The above code is within my Rich Text Options and now when I render my Rich Text it will automatically be handled for me because of the block above. Note if you reference other items in here you can simply provide an if block to render this code component, otherwise render something else. So I mentioned another content type, what does that look like?

It takes 2 fields, a title and a long text field, the title is the indicator for the language so the package knows how to highlight the text appropriately and then the long text field is specifically for holding the code snippet.

Once you've configured this, you're good to go. Once you pass content into the documentToReactComponents it will render your code snippet as a real snippet:

documentToReactComponents(content, richTextOptions)

Technology used: