Gatsby 如何使用Contentful的富文本渲染器格式化带有标记的代码段？

我正在使用Contenful作为我的盖茨比网站的CMS。在他们的富文本react渲染器的配置中，我试图将富文本字段中的所有代码包装在 问题是，当我选择“普通文本”时，Contentful会将每一行代码片段包装在段落标记中，这是无效的HTML标记不能是标记的直接后代，并且会弄乱我的所有格式

---

是否有人知道如何重写该行为或解决方法，以呈现来自Gatsby中Contentful的格式正确的代码段？

我没有使用rich text react呈现程序，但在节点应用程序中，我遇到了与rich text html呈现程序相同的问题。不幸的是，该标记不能作为富文本块使用，因此它将始终作为段落内的代码块呈现。我通过在渲染器选项中捕捉段落块来解决此问题，并将该块渲染为该段落中的唯一内容，并且该块的类型代码是我使用lodash检查的，因为节点。内容[0]。标记是数组而不是对象。虽然不是最优雅的解决方案，但它很有效

---

我没有使用rich text react渲染器，但在节点应用程序中使用rich text html渲染器时遇到了相同的问题。不幸的是，该标记不能作为富文本块使用，因此它将始终作为段落内的代码块呈现。我通过在渲染器选项中捕捉段落块来解决此问题，并将该块渲染为该段落中的唯一内容，并且该块的类型代码是我使用lodash检查的，因为节点。内容[0]。标记是数组而不是对象。虽然不是最优雅的解决方案，但它很有效

在渲染标记选项中使用BLOCK.CODE

在渲染标记选项中使用BLOCK.CODE

---

Contentful DevRel hereContentful DevRel here我正在下一个JS项目中使用TailwindCSS。details对象是来自Contentful的API请求的RichText字段类型。用于反应的文档组件包无法显示图像等内联资源。这就是为什么我在jsx中使用@madebyconnor/richtext：

---

我正在下一个JS项目中使用TailwindCSS。details对象是来自Contentful的API请求的RichText字段类型。用于反应的文档组件包无法显示图像等内联资源。这就是为什么我在jsx中使用@madebyconnor/richtext：

const Blog = (props) => {
  const Code = ({children}) => <pre><code style={{backgroundColor: "red"}}>{children}</code></pre>
  const options = {
   renderMark: {
      [MARKS.CODE]: code => <Code>{code}</Code>},
  }
}

[BLOCKS.PARAGRAPH]: (node: any, next: Next) => {
    if (node.content.length === 1 && _.find(node.content[0].marks, {type: 'code'})) {
        return `<pre>${node.content[0].value}</pre>`;
    }

    // else return content as it is
    return `<p>${next(node.content)}</p>`;
},

import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { tomorrow } from "react-syntax-highlighter/dist/cjs/styles/prism";

export const options = {
  renderMark: {
    [MARKS.CODE]: code,
  },

  renderText: (text) => {
    return text.split("\n").reduce((children, textSegment, index) => {
      return [...children, index > 0 ? <br key={index} /> : "", textSegment];
    }, []);
  },
};

function code(text) {
  text.shift(); // for empty
  const language = text.shift();

  const value = text.reduce((acc, cur) => {
    if (typeof cur !== "string" && cur.type === "br") {
      return acc + "\n";
    }

    return acc + cur;
  }, "");

  return (
      <SyntaxHighlighter language={language} style={tomorrow}>
        {value}
      </SyntaxHighlighter>
  );
}

javascript // language information
const a = 10;
function test(args){
  const b = 10;
  let c = "test"

  return b;
}

import { MARKS } from '@contentful/rich-text-types';
import RichText from '@madebyconnor/rich-text-to-jsx';

<RichText
        richText={details} //details is the richtext field type coming from contentful
        overrides={{
           [MARKS.CODE]: (node) => {
               return <div className="px-6 py-3 my-4 bg-gray-500 text-blue-300 font-mono rounded-lg">{node.children}</div>
               }
        }}
/>