Markdown 在 GatsbyJS 中无法正确显示

Question

我一直在尝试使用 markdown 内容为博客生成 posts，但除了图片和粗体文本外，其余文本显示不正确。

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

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

但是，如果我在 GraphiQL 中使用查询，生成的 HTML 如下：

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

但是在网站上，它并没有显示为header:

Answer 1

您的代码和查询都没有问题。代码按预期工作，您正在检索和打印数据。您只缺少每个降价标签的样式以“将其显示为 header”。

只需在您的组件中添加一个 CSS（或 SCSS）样式。例如，在与您的组件相同的文件夹中添加一个样式文件并添加（在您的 Post 中）：

import './myPostStyles.scss'

在您的 SCSS 文件中：

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

剩下的标签也是如此。作为全局标记样式，我建议将它们添加到全局文件中而不是组件本身。

Markdown 在 GatsbyJS 中无法正确显示

Markdown not displaying correctly in GatsbyJS

markdown

gatsby