Reactjs 在内容CMS中嵌入代码时出现问题_Reactjs_Content Management System_Gatsby_Contentful

Reactjs 在内容CMS中嵌入代码时出现问题

reactjs content-management-system gatsby

Reactjs 在内容CMS中嵌入代码时出现问题,reactjs,content-management-system,gatsby,contentful,Reactjs,Content Management System,Gatsby,Contentful,我在通过内容丰富的CMS生成博客帖子时遇到问题。我试图嵌入代码，但在我的实时服务器中，我所有的代码都显示在一行中选择所有我的代码并单击工具栏中的代码。它改变了我嵌入的代码的字体。但在我的服务器中，它就像我所有的代码一样显示在一行中附上下面的截图供您参考你们能帮我解决这个问题吗。如果你们在博客文章中使用富文本。您可以使用长文本创建附加内容模型来承载源代码，并将源代码模型嵌入您的博客文章对于长文本，您将能够使用标记语法。因此，您可以执行以下操作来保留格式 ``` import Reac

我在通过内容丰富的CMS生成博客帖子时遇到问题。我试图嵌入代码，但在我的实时服务器中，我所有的代码都显示在一行中

选择所有我的代码并单击工具栏中的代码。它改变了我嵌入的代码的字体。但在我的服务器中，它就像我所有的代码一样显示在一行中

附上下面的截图供您参考

你们能帮我解决这个问题吗。

如果你们在

博客文章中使用富文本
。您可以使用长文本
创建附加内容模型来承载源代码，并将源代码模型嵌入您的博客文章

对于长文本

，您将能够使用标记语法。因此，您可以执行以下操作来保留格式

```
import React from 'react';
import { Link } from 'gatsby';
import Layout from '../components/Layout';
import Head from '../components/Head';

const AboutPage = props => {
  return (
    <div>
      <Layout>
        <Head title="About" />
        <h1>About Me</h1>
        <p>I'm a Engineer.</p>
        <p><Link to="/contact">Want to work with me? React out.</Link></p>
      </Layout>
    </div>
  );
};

export default AboutPage;

```

```
从“React”导入React；
从“盖茨比”导入{Link}；
从“../components/Layout”导入布局；
从“../components/Head”导入Head；
const AboutPage=props=>{
返回(
关于我
我是工程师
想和我一起工作吗？做出反应
);
};
导出默认值约为页；
```

我希望有帮助

更新：

我认为列出这些步骤可以让答案更加清晰

使用

长文本

类型创建名为

代码块

的新模型

创建包含源代码的新

代码块

在正文部分，选择刚刚创建的

代码块内容
请以脚本的形式发布代码，而不是以图像的形式发布。因此，您的意思是，对于内容丰富的正文部分，最好添加“文本”格式，而不是我当前添加的“富文本”。然后我可以添加类似于…```的代码```@但是您将继续使用富文本
。我添加了一些步骤，希望能让我的答案更加清晰。