> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://contentful.com/developers/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://contentful.com/_mcp/server.

# Render code blocks using Rich Text

> How to render code blocks using Rich Text.

## Overview

The following guide is an example of how you can render code blocks using the Rich Text editor in Contentful. We will configure the Rich Text Options file at the code level. The Rich Text Options file contains configuration settings for the editor, in this case, the way your code blocks' syntax is highlighted.

> **Info**
>
> This guide assumes you are familiar with JavaScript, React, Next.js and the React Syntax Highlighter.

## Prerequisites

* A Rich Text field within Contentful. This will hold your structured content, including embedded code snippets.

* A content type for code snippets with the following fields:
  1. **Language**: Short text field to specify the programming language.
  2. **Code snippet**: Long text field to store the actual code.
     ![Code block in Rich Text](https://fdr-prod-docs-files-public.s3.us-east-1.amazonaws.com/contentful.docs.buildwithfern.com/ba95200f8e9ae121623345b66e6d090159cef4cb51aaa187895333a181269f8f/docs/assets/images/rich-text-code-block.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIA6KXJSKKNFOCF7G4B%2F20260929%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20260929T234813Z&X-Amz-Expires=604800&X-Amz-Signature=f3437f728a84be296d3ead05c24b7db5a50e95214552245b84ecdc669672a757&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject)

* A Rich Text field that is set to accept only the content type for code snippets

* The [react-syntax-highlighter](https://www.npmjs.com/package/react-syntax-highlighter) installed

## Implementation

### 1. Import syntax highlighter and theme

```tsx
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';

```

### 2. Extend your Rich Text Options

To configure the Rich Text Options file at the code level, you need to embed a content type in your Rich Text field in Contentful. This way, we know we have a code block and have reusability of content.

We can achieve the desired outcome by writing something like this:

```js
[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=&#123;&#123; marginTop: "20px", marginBottom: "20px" &#125;&#125;>
          {codeSnippet}
        </SyntaxHighlighter>
      );
    },
```

When rendering the Rich Text content using `@contentful/rich-text-react-renderer`, you need to provide a custom rendering rule for embedded entries:

```tsx
import { BLOCKS } from '@contentful/rich-text-types';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';

const richTextOptions = {
  renderNode: {
    [BLOCKS.EMBEDDED_ENTRY]: (node: any) => {
      const { codeSnippet, language } = node.data.target.fields;

      return (
        <SyntaxHighlighter
          language={language}
          style={vscDarkPlus}
          customStyle=&#123;&#123; marginTop: '20px', marginBottom: '20px' &#125;&#125;
        >
          {codeSnippet}
        </SyntaxHighlighter>
      );
    },
  },
};
```

### 3. Render the content

```tsx
documentToReactComponents(content, richTextOptions)
```

Where `content` is the JSON you get from the Contentful Rich Text field.

Once implemented, any embedded code snippet entry within your Rich Text field will be rendered as a highlighted code block using `react-syntax-highlighter`.

> How to render code blocks using Rich Text.