Introduction

When Cloudpess exports content to a Contentful Long Text field, it converts it to markdown. This works for most scenarios, but sometimes, you want to include custom content that must be processed in a certain way by the markdown library on your website. For example, you might use MDX, which allows you to add custom JSX content to your markdown.

Your first inclination may be to add the corresponding JSX to your source document and allow Cloudpress to export it to Contentful. However, this may not work as expected. Specifically, in the case of JSX, Cloudpress will encode some of the JSX markup when it exports the content. Let’s say you add the following JSX component to your source document:

Attempting to add MDX to Google Docs

Exporting this to Contentful will result in the following markdown. As you can see, Cloudpress encoded the JSX code.

The MDX encoded when exported as Markdown

To work around this problem, Cloudpress introduced a feature called Raw Content Blocks. When Cloudpress exports your content and encounters a Raw Content Block, it will send the content of that block to Contentful as-is.

The rest of this document will walk you through this feature by demonstrating how to use Raw Content Blocks in Google Docs and Notion to correctly export the JSX from the sample above.

Export custom markdown from Google Docs

Add raw content to document

To export custom markdown from a Google Doc, add a single-cell table to your document - in other words, a table with one row and one column.

Add a single-cell table in Google Docs

Give the table a dotted border by placing your cursor inside the table and selecting the dotted border from the Border dash toolbar item.

Add a dotted border to the table

Add your custom markdown inside the table. The screenshot below shows the sample JSX code added to the table.

Add the JSX code to the table

Next, you must configure Cloudpress to interpret the content of the table as raw content. The procedure differs depending on whether you use the Cloudpress Google Docs Add-on or the Export Content page.

Enabling raw content when exporting from Google Docs

Before exporing the content from Google Docs, you must tell Cloudpress to treat the content in the table as raw content. This procedure differs depending on whether you export the content using the Google Docs Add-on, or from the Export Content page.

Tutorial video

The tutorial video below walks you through exporting custom markdown from Google Docs to Contentful.

Export custom markdown from Notion

Cloudpress uses Code blocks to denote raw content in Notion. However, code blocks are also used when you want to include code snippets in your content. For example, you may have a blog geared towards software developers and often include code snippets in your content. In this case, you can instruct Cloudpress to treat only code blocks in a specific language as raw content and all others as code blocks.

Enable raw content for your Notion connection

Go to the Connections page in Cloudpress and click on your Notion connection. Go to the Content Conversion tab.

  1. In the Raw content blocks section, enable the option to convert code blocks to raw content. With this enabled, Cloudpress will treat all code blocks as raw content.
  2. Next, limit raw content only to a specific language. As mentioned before, this is useful when using code blocks for code snippets. In the screenshot below, you can see that Cloudpress will only treat code blocks for Markdown as raw content. All other code blocks will be exported as code blocks.

Enable raw content for your Notion connection

Click Save Changes to save your changes. Cloudpress will now treat code blocks for the specified language in all pages exported from this connection as raw content.

Add the custom markdown to your Notion page

Add a code block to your page.

Add a code block to your Notion page

Add your custom markdown to the code block and set the language to the same language you configured in your connection settings. The screenshot below demonstrates a code block with the JSX code and the language set to Markdown.

Add the JSX code to your code block

You can now export the content to Contentful. If the code block’s language matches your Notion connection configuration, Cloudpress will export the markdown code as raw content.

Tutorial video

The tutorial video below walks you through exporting custom markdown from Notion to Contentful.