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: Exporting this to Contentful will result in the following markdown. As you can see, Cloudpress encoded the JSX code. 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
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. 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 your custom markdown inside the table. The screenshot below shows the sample JSX code added 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 in the Google Docs Add-on
Open the settings for the Google Docs Add-on and enable the setting called Treat single-cell tables with a dotted border as raw content. After enabling the setting, click the Save button to save your settings. From now on, any document you export via the Google Docs Add-on will treat the content inside a single-cell table with a dotted border as raw content.
Enabling raw content in the Export Content page
If you use the Export Content page, you can enable the option to export raw content when you select the documents you want to export. Click on the Show Settings button. Enable the Treat single-cell tables with a dotted border as raw content setting. This setting does not persist, so you must enable it whenever you export content that includes raw content. After enabling the setting, you can proceed with exporting your document. Cloudpress will treat the content inside any single-cell table with a dotted border as raw content.
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.
- 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.
- 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.
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 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. 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.
The tutorial video below walks you through exporting custom markdown from Notion to Contentful.