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. Apple i mac book.

Adding markdown content from CMS in Gatsby blog

1. Install plugin

2. Add plugin into gatsby-config.js

The Contentful Markdown editor supports basic HTML tags. We encourage you to format the content with Markdown markup, but sometimes it's just difficult to avoid writing that tag. Markdown Example. This is an iOS example application displaying Markdown content stored on Contentful.It demonstrates both converting Markdown to HTML using MMMarkdown which will be displayed in a WKWebView as well as converting Markdown to NSAttributedString using CocoaMarkdown to display them in a UITextView. Contentful is a content management platform for web applications. 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. Name the new function 'contentful-md-to-html' Make sure the 'Node.js' runtime is selected Choose the option to upload a zip file, then upload the file created in step 1.2. Leave the 'Handler' input set to its default value of index.handler.

3. Add markdown text field into Contentful Content Type.

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

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

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.

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!

I ❤️ markdown. I like its simplicity and minimalistic API which is good enough to cover most of needed HTML markup. At least for textual content. At work we have a small node based microservice that delivers data from Contentful in exactly markdown format. It's all working well but we started having cases where part of the text is in Contentful and the other part is in that microservice. For example when we have a button with a catchy design. Download os x installer from app store. We want to content manage the label of the button but the actual markup to be on our side.

One approach to such requirement is to create a new field in Contentful and place the button's label there. This however is not scaling well. We can't keep adding more and more fields. The other approach is to have markers in the content which are later replaced. We have already some placeholders in the format of {placeholder name here}. A bit like mustache template language. For example:

Then when a request comes in we fetch that markdown and replace {stuff} with a list of links and {seeMore} with a button. Now, let's say that we want to internationalize the label of the button. Right now that label lives into the microservice but we want to add it in Contentful. So something like this will make more sense:

The thing is that when we transform this markdown to HTML we are getting:

We need Click here to see more suggestions extracted from the markdown and only {seeMore} to appear so we can do a proper replacement. And here is where the marked advanced usage comes into play.

The marked API allows us to define a custom renderer and process each element. In our case we need to recognize a one-line paragraph that starts with { and ends with }. Inside there may be =. The result of this code is:

Contentful Markdown To Html

And this is how with just ~20 lines of code we have a little bit smarter placeholders.

Contentful Markdown To Html Online

Later on I realized that we may use those new placeholders to pass variables-like data to the microservice. For example:

Contentful Markdown To Html Code

Then later we just replace {category} with an empty string. Hope you find this helpful. It works pretty well for us. 😎