如何在 Gatsby 中显示包含 HTML 语法的 Markdown 文件？

Question

我正在使用 Markdown 文件为 gatby 生成页面。为了控制图片的风格，我使用了html语法。但是gatsby生成的页面不显示html部分。

这是我的降价文件：

---
......frontmatter......
--- 
......content......
<table>
  <tr>
    <td><img src="./images/2018/zotero/ZoteroWebDAV.png"></td>
    <td><img src="./images/2018/zotero/ZoteroExts.png" width=100%></td>
  </tr>
</table>
......content......

其他都正常渲染，但是table和里面的图片都不显示。这是我的盖茨比-config.js.

{
      resolve: `gatsby-transformer-remark`,
      options: {
        excerpt_separator: `<!-- endexcerpt -->`,
        plugins: [
          // 'gatsby-remark-relative-images',
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1200,
            },
          },
          {
            resolve: `gatsby-remark-image-attributes`,
            options: {
              dataAttributes: true
            }
          },
        ],
      },
    },

如何使Markdown中的html部分正常渲染？

Answer 1

您也可以使用 built-in dangerouslySetInnerHtml property or any markdown parser like markdown-to-jsx。

使用第一种方法，遵循 Gatsby's guides:

import React from "react"
import { graphql } from "gatsby"

export default function Template({data}) {
  const { markdownRemark } = data // data.markdownRemark holds your post data
  const { frontmatter, html } = markdownRemark
  return (
    <div className="blog-post-container">
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <h2>{frontmatter.date}</h2>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  )
}

export const pageQuery = graphql`
  query($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`

因为您没有分享您的查询，所以我使用了指南中的查询，但可以根据需要进行调整。如您所见，frontmatter 末尾的所有内容都是 html:

<div
  className="blog-post-content"
  dangerouslySetInnerHTML={{ __html: html }}
/>

使用第二种方法，并遵循前面的查询结构，html 应呈现为：

import Markdown from 'markdown-to-jsx';
import React from 'react';

<Markdown>{html}</Markdown>

如果有任何障碍，我会说第二种方法更好，因为正如 dangerouslySetInnerHTML 名称所暗示的那样，您可能会将您的网站暴露给 XSS (Cross-Site Scripting)，而第二种方法会清理实施。

如何在 Gatsby 中显示包含 HTML 语法的 Markdown 文件？

How to display Markdown files containing HTML syntax in Gatsby?

html

markdown

gatsby

gatsby-remark-image