Markdown not displaying correctly in GatsbyJS

user_9148484 0
Viewed 393

I have been trying to generate posts for a blog using markdown content, but except for the pics and the bolded text, the rest of the text isn't displayed correctly.

index.md

---
slug: "/news/forest/second-transnational-meeting"
date: "2020-10-01"
title: "FOREST: 2nd Transnational Meeting"
tag: "FOREST"
---
## 16th-17th September 2020, questions, answers, and parallels between at Forest Training Center Pichl, Austria


The 1st-day agenda dealt with requirements and standards for forestry workers in Austria.The
presentations were followed by questions, answers, and parallels of the same topics in the project
partners’ countries.

![1](./first-image.jpg)


![2](./second-image.jpg)

The next day, the hosts organized a practical workshop on safety regulations and working standards in
the experimental forest of the Forestry Training Center Pilch. A tight link between theory and practice!

![3](./third-image.jpg)


![4](./fourth-image.jpg)

**Lots of information and rich experience!**

gatsby-config.js

{
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            loading: `lazy`,
            maxWidth: 300
          }
        },
      ],
    }
  },

and the template for the post:

export default function Post({ data }) {
  const { frontmatter, html } = data.markdownRemark;

    return (
        <Layout>
            <Seo title = {frontmatter.title}/>
            <section>
            <div className="font-lora">
                <div className="text-2xl font-bold">{frontmatter.title}</div>
                <div className="text-xl">{frontmatter.date}</div>
                <br/>
                <ShareButtons slug={frontmatter.slug}/>
                <br/>
            </div>
            </section>
            <section
                dangerouslySetInnerHTML={{ __html: html }}
            />
        </Layout>
    )
}

export const query = graphql`
{
    markdownRemark {
      frontmatter {
        date(formatString: "MMMM DD YYYY")
        slug
        tag
        title
      }
      excerpt(pruneLength: 250)
      html
    }
  }
  
`;

However if I use the query in GraphiQL, the generated HTML is the following:

<h2>16th-17th September 2020, questions, answers, and parallels between at Forest Training Center Pichl, Austria</h2>

But on the website, it is not displayed as a header:

enter image description here

gatsby markdown
1 Answers

There's nothing wrong with your code neither your query. The code is working as expected, you are retrieving and printing your data. You are only missing the styles for each markdown tag to "display it as a header".

Just add a CSS (or SCSS) styles in your component. For example, add a styles file in the same folder as your component and add (in your Post):

import './myPostStyles.scss'

In your SCSS file:

h2 {
  font-size: 44px;
  color: red;
}

And so son for the rest of the tags. Being a global tag styling, I would recommend adding them in a global file rather than in a component itself.

user_55853710
Related