Migrating from markdown to rich text. If you already have markdown fields, you can use the rich text from markdown package. It automatically converts many specific markdown nodes to rich text, with the option of adding a callback for unsupported nodes. See the documentation for the package for more examples and the list of supported markdown nodes. Unless the text is Markdown-free, you cannot use the returned value directly. In order to handle the Markdown content, you must use a transformer plugin such as gatsby-transformer-remark. The transformer will create a childMarkdownRemark on the “Long text” field and expose the generated html.

There are two most common ways of using markdown in Gatsby with a headless CMS tool.

This post will present how to use them with Contentful service.Additionally it will include contenful image converter inside markdown.

Amazing plugin for converting and optimaizing images from contentful into Gatsby blog.

This is a very popular plugin mostly used for processing markdown and them placing it into the HTML.It is also usefull if you want not only process markdown but also include your own JSX components.

Adding markdown content from CMS in Gatsby blog

1. Install plugin

2. Add plugin into gatsby-config.js

3. Add markdown text field into Contentful Content Type.

• Add field
• Select Text field (Long text, full-text search)
• In configuration select Markdown

Contentful Markdown To Html

4. In your blog post template graphql query get markdown body

Contentful Markdown To Html Online

5. Use markdown in blog post template component

6. From now on you can put your imports and React components inside Contentful markdown field. It will be automatically detected and transformed.

Plugin powered by remark processor. It parses markdown but without included parser for React components.

1. Install plugin

2. Add plugin into gatsby-config.js

3. Add markdown field in Contentful Content Type of your blog as in previous plugin description

4. In your blog post template graphql query get markdown body

5. Use markdown in blog post template component

6. If you want to use custom components inside markdown you need to use additional plugin gatsby-remark-component with rehype-react which is also very simple. Full description how to do it can be found in linked documentation.

It is your choice which plugin you will use. I have tried both and currenly I'm using gatsby-plugin-mdx for markdown processor including custom component.

Contentful Markdown To Html Code

Contentful Markdown To Html Converter

I'm also very happy with plugin for simple image optimization gatsby-remark-images-contentful. If you are looking for low cost and simple image optimalization for your blog, this is it!