1

我正在使用 Prismic CMS 和 Gatsby（都是最新版本）和官方gatsby-source-prismic插件。

我正在尝试从 Prismic 获取博客文章并将它们显示在我的博客页面上，效果很好。
我唯一挣扎的是 v3-plugin 的 HTML 序列化器。

我使用这个模板https://github.com/LekoArts/gatsby-starter-prismic-i18n作为我的启动器。- 由于这个 git 基于 v2，我不得不重写几乎所有内容以将其调整为 v3。

我的“代码块”切片只输出我预格式化的 HTML（在 Prism 语法高亮之后），这是错误的：
这是我的输出：
在此处输入图像描述

我的代码组件：

const CodeBlock = ({ input }) => {
  return (
    <>
      //this was for v2
      <Content dangerouslySetInnerHTML={{ __html: input.primary.code_block.html }} />
      //this should be for v3
      <RichText render={input.primary.code_block.raw} htmlSerializer={htmlSerializer} />
    </>
  )
}

我的 htmlSerializer：

    import React from 'react'
import { Elements } from 'prismic-richtext'
import Prism from 'prismjs'

const propsWithUniqueKey = function (props, key) {
  return Object.assign(props || {}, { key })
}

// Labels with this name will be inline code
const codeInline = ['text']
// Labels with these names will become code blocks
const codeBlock = ['javascript', 'css', 'scss', 'jsx', 'bash', 'json', 'diff', 'markdown', 'graphql']

const htmlSerializer = (type, element, content, children, index) => {
  var props = {}

  switch (type) {
    // First differentiate between a label and a preformatted field (e.g. the Code Block slice)
    case Elements.label: {
      // Use the inline code for labels that are in the array of "codeInline"
      if (codeInline.includes(element.data.label)) {
        return `<code class="language-${element.data.label}">${content}</code>`
      }
      // Use the blockquote for labels with the name "quote"
      if (element.data.label === 'quote') {
        return `<blockquote><p>${content}</p></blockquote>`
      }
      // Use the code block for labels that are in the array of "codeBlock"
      // Choose the right PrismJS highlighting with the label name
      if (codeBlock.includes(element.data.label)) {
        return `<pre class="language-${element.data.label}"><code class="language-${element.data.label
          }">${Prism.highlight(content, Prism.languages[element.label])}</code></pre>`
      }
      return null
    }
    case Elements.preformatted: {
      props = { className: `language--${element.label}` }

      if (codeBlock.includes(element.label)) {

        const text = Prism.highlight(
          element.text,
          Prism.languages[element.label]
        );
        return React.createElement('div', {}, `<pre class="language-${element.label}"><code class="language-${element.label}">${Prism.highlight(
          element.text,
          Prism.languages[element.label]
        )}</code></pre>`)

        // my other try
        return React.createElement('pre', { className: `language-${element.label}` },
          React.createElement('code', { className: `language-${element.label}` }, text))

      }
      return null
    }
    default: {
      return null
    }
  }
}

export default htmlSerializer

在 v3 中，当我尝试将序列化程序添加到我的 gatsby-config.js 时出现错误。

我的“版本”至少输出 pre 和 code-tags，但 prism-highlighter 只输出 HTML。RichText.render 方法似乎无法按预期工作，或者我的序列化程序中出现逻辑错误。

4

1 回答 1

0

也许它不是内置/理想的解决方案，但它肯定会工作，使用markdown-to-jsx依赖。

<Markdown>input.primary.code_block.html</Markdown>

此外，使用您的方法，您可以尝试：

  <RichText render={input.primary.code_block.html} htmlSerializer={htmlSerializer} />
于 2021-02-01T06:49:52.577 回答