Блог

Я пытался создавать сообщения для блога, используя содержимое markdown, но, за исключением фотографий и текста, выделенного жирным шрифтом, остальной текст отображается некорректно.

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
          }
        },
      ],
    }
  },
  

и шаблон для сообщения:

 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
    }
  }
  
`;
  

Однако, если я использую запрос в GraphiQL, сгенерированный HTML-код выглядит следующим образом:

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

Но на веб-сайте она не отображается в виде заголовка:

Ни в вашем коде, ни в вашем запросе нет ничего плохого. Код работает должным образом, вы извлекаете и печатаете свои данные. Вам не хватает только стилей для каждого тега markdown, чтобы «отобразить его как заголовок».

Просто добавьте стили CSS (или SCSS) в свой компонент. Например, добавьте файл стилей в ту же папку, что и ваш компонент, и добавьте (в свой Post ):

 import './myPostStyles.scss'
  

В вашем файле SCSS:

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

И так далее для остальных тегов. Поскольку это глобальный стиль тегов, я бы рекомендовал добавлять их в глобальный файл, а не в сам компонент.