Как отобразить файлы Markdown, содержащие синтаксис HTML, в Gatsby?

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......

Все остальное рендерится нормально, однако ни таблица, ни картинки в ней не отображаются. Вот мой gatsby-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
            }
          },
        ],
      },
    },

Что я могу сделать, чтобы html-часть в Markdown отображалась нормально?

Answer 1

Вы также можете использовать встроенныйdangerouslySetInnerHtmlсвойство или любой парсер уценки, напримерmarkdown-to-jsx.

Используя первый подход, следуя руководствам Гэтсби :

      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является :

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

Используя второй подход и следуя предыдущей структуре запроса, htmlдолжно быть представлено как:

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

<Markdown>{html}</Markdown>

Если есть какие-либо препятствия, я бы сказал, что второй подход лучше, потому что, как dangerouslySetInnerHTMLимя предполагает, что вы потенциально подвергаете свой сайт XSS (межсайтовому скриптингу), в то время как второй подход очищает реализацию.