使用 Gatsby 将 Rich-Text 组件中的 Markdown 转换为 HTML

我正在使用 Contentful 的富文本字段类型来构建页面，我拥有的 Embedded_Blocks 之一是用于我用来构建表格的 Markdown 字段类型：

Markdown 字段类型：

| Title | Title | 
| ---------- | ---------- | 
| Cell | Cell | 

我可以检索富文本数据并构建我的 Embedded_Blocks，如下所示：

[BLOCKS.EMBEDDED_ENTRY]: (node) => {
   const fields = node.data.target.fields;
   switch (node.data.target.sys.contentType.sys.id) {
      case 'video':
          const url = (fields.url['en-US']);
          return <Video url={url}/>

      // This is how I'm currently trying to convert Markdown to HTML
      ///////////////////////////////////////////////////////////////
      case 'markdown':
          const markdown = (fields.markdown['en-US']);
          console.log('markdown', markdown);
          return <div dangerouslySetInnerHTML={{ __html: markdown }} />
      default:
          return <div>Fallback</div>
   }
},

我遇到的问题是它只返回一个字符串，我假设因为我还没有转换markdown在将其传递给 HTML 之前dangerouslySetInnerHTML={{ __html: markdown }}.

如何将 Markdown 转换为 HTML，以便我可以使用它来渲染它dangerouslySetInnerHTML={{ __html: markdown }}?

在 Gatsby 内部执行此操作的最合适方法是在 Gatsby 内部创建子节点onCreateNode https://www.gatsbyjs.org/docs/node-apis/#onCreateNode生命周期挂钩。该钩子仅在nodejs进程中调用，并在下载Contentful条目时运行一次markdown解析。

这应该可以帮助您入门 - 它基于 Gatsby 内部的代码gatsby-transformer-remark https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-transformer-remark/src/on-node-create.js#L4

请注意，这是伪代码 - 您当然必须对其进行测试。

// gatsby-node.js

var remark = require('remark')
var recommended = require('remark-preset-lint-recommended')
var html = require('remark-html')

const processor = remark()
  .use(recommended)
  .use(html)

export async function onCreateNode({ actions, node, loadNodeContent}) {
  if (!/RichText/.test(node.internal.type)) {
    return
  }

  const markdown = // somehow load the raw markdown from the node - I haven't studied RichText nodes yet

  const html = processor.process(markdown)

  const markdownNode = {
    id: createNodeId(`${node.id} >>> MarkdownRemark`),
    children: [],
    parent: node.id,
    internal: {
      content: data.content,
      type: `MarkdownRemark`,
    },
  }

  actions.createNode(markdownNode)
  actions.createParentChildLink({ parent: node, child: markdownNode })
}

以供参考，这里是 Contentful 在 Gatsby 中创建富文本节点的地方： https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-source-contentful/src/normalize.js#L196