How to display markdown frontmatter as HTML in Gatsby

Question

my index-page displays blurbs with image and text. But i cant get the text to be formated as HTML. Im using the markdown-widget with Netlify CMS and want linebreak to work when spacing content in the admin view. ive tried use dangerouslySetInnerHTML={item.text} aswell without any luck.

item is just a mapping of all blurbs.

<p> {item.text} </p>

graphql:

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        intro {
          blurbs {
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            heading
            text
          }
          heading
          description
        }
      }
    }
  }

the label in config.yml:

- {label: "Intro", name: "intro", widget: "object", fields: [{label: "Heading", name: "heading", widget: "string"}, {label: "Description", name: "description", widget: text}, {label: Blurbs, name: blurbs, widget: "list", fields: [{label: "Image", name: "image", widget: "image"}, {label: "Rubrik", name: "heading", widget: "string"}, {label: "Text", name: "text", widget: "markdown"}]}]}

the Index.md i want to read from (i guess this works, due to the fact that i get the data to display, just not in html form)

  blurbs:
    - image: /img/img1.jpg
      heading: heading one
      text: >-
        This is the content i want in HTML
    
    - image: /img/img2.jpg
      heading: heading two
      text: >-
        This is also the content i want in HTML
       
        And this should give me a linebreak

jimmybutton · Answer 1 · 2021-08-11T10:44:19.973

You can acchieve this using the gatsby-transformer-remark-frontmatter plugin.

Install the plugin and add it to your gatsby-config.js:

$ npm install gatsby-transformer-remark-frontmatter

// in your gatsby-config.js
plugins: [
  'gatsby-transformer-remark',
  'gatsby-transformer-remark-frontmatter'
]

To tell Gatsby that the text field within each blurb contains markdown and that you want the string to be transformed to html, you need to add a @md directive to your schema. To do that, add the following code to the gatsby-node.js file.

// in your gatsby-node.js

exports.createSchemaCustomization = ({ actions }) => {
  const {createTypes} = actions
  const typeDefs = `
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }

    type Frontmatter {
      intro: Intro
    }

    type Intro {
      blurbs: [Blurb]
    }

    type Blurb {
      text: String @md
    }
  `
  createTypes(typeDefs)
}

Now the text field of the blurbs will have a special html field that you can include in your query:

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        intro {
          blurbs {
            text {
              html
            }
          }
        }
      }
    }
  }

Lastly, in your component, you should be able to loop over the blurbs and render the html like so:

...
<div dangerouslySetInnerHTML={{ __html: blurb.text.html }} />

Ferran Buireu · Answer 2 · 2021-02-09T14:53:58.230

0

Assuming that everything's properly set, as it seems.

By default, there's a html property right inside frontmatter:

markdownRemark(frontmatter: { templateKey: { eq: "index-page" } }) {
      frontmatter {
        html
        intro {
          blurbs {
            image {
              childImageSharp {
                fluid(maxWidth: 2048, quality: 100) {
                  ...GatsbyImageSharpFluid
                }
              }
            }
            heading
            text
          }
        }
      }
    }
  }

Note: test your query at localhost:8000/___graphql

Once you have queried it, just display it as you did, nesting to the correct property:

dangerouslySetInnerHTML={html}

You can check for a full tutorial at https://www.gatsbyjs.com/docs/how-to/sourcing-data/sourcing-from-netlify-cms/

edited Feb 09 '21 at 14:53

answered Feb 09 '21 at 14:46

Ferran Buireu

28,630
6
39
67

The problem is that i dont have text data in the HTML section in the md file. As i understand it the HTML is the code after the ending ===. I want it in the text frontmatter key/value , but render as html. If that make sense? – csk87 Feb 09 '21 at 18:38
In that case, inside the `frontmatter` there must be an item if your object. If you query it (in the `localhost:8000/___graphql`) it should display the HTML. That field, can be displayed using the `dangerouslySetInnerHTML` – Ferran Buireu Feb 09 '21 at 18:42
The “blurbs” is an array of objects, but I can’t find a html in that nested level. Can only query image, heading and text – csk87 Feb 09 '21 at 18:46
Is the field set as markdown in the widget? – Ferran Buireu Feb 09 '21 at 18:52
Yeah it is! Could it be some problem due to it being in a list widget? – csk87 Feb 09 '21 at 18:57
It shouldn't. Have you tried the `mode` option? https://www.netlifycms.org/docs/widgets/#markdown – Ferran Buireu Feb 09 '21 at 19:02
I use both raw and rich, so I have the toggle option in the cms – csk87 Feb 09 '21 at 19:53
I added the lable from config.yml and the index.md if anone sees the problem? – csk87 Feb 10 '21 at 06:33
I make an example like yours and I'm able to display it. Once you query it (using the name of the markdown field, `text` in this case), you need to print it whatever you want. I use `markdown-to-jsx`library – Ferran Buireu Feb 10 '21 at 16:34
1

I can display it, but i want the cms text formatting to be displayed as well. E.g if I make the text in different sections I want row breaks. or if I make some word bold it should be that on the site to (if that makes sense? – csk87 Feb 11 '21 at 20:51

How to display markdown frontmatter as HTML in Gatsby

2 Answers2