如何在反应钩子页面的数据显示中为代码片段添加代码块

Question

我在我的 react hooks 网站中显示来自 contentful 的博客内容。现在post.description收到了博客的完整描述。我想将 post.description 中收到的code snippets, json data 显示为code block。还想将标题添加到 h1 或 h2 标签。我们如何从描述字段中识别代码块？现在它只是在页面中显示文本（请参考添加的屏幕截图）

import React from "react";
import { Link, useParams } from "react-router-dom";
import MD from "react-markdown";
import { useSinglePost } from "../custom-hooks";
import Moment from 'moment';



export default function SinglePost() {
  const { id } = useParams();
  const [post, isLoading] = useSinglePost(id);

  const renderPost = () => {
    if (isLoading) return ( <div> <p className="noSearchData">Loading...</p> </div>);

    return (
      <React.Fragment>
        <div className="main_intro">
          <h3 className="blog_title">{post.title}</h3>
          <small className="blog_date">{Moment(post.createdAt).format('MMM DD YYYY')}</small>
          <pre className="blog_main_desc"><code>{post.description}</code></pre>
          <img
            className="blog_img"
            src={post.image.fields.file.url}
            alt={post.title}
          />
        </div>

        <div className="post__body">
          <MD source={post.body} />
        </div>
      </React.Fragment>
    );
  };

  return (
    <div className="post">
      <Link className="post__back" to="/">
        {"< Back"}
      </Link>

      {renderPost()}
    </div>
  );
}

Answer 1

要将代码 sn-p 作为代码块包含在 ReactJs 中，您可以使用语法高亮器，如 react-syntax-highlighter

安装 npm react-syntax-highlighter --save

然后在您的代码中导入荧光笔：

import SyntaxHighLighter from 'react-syntax-highlighter';
import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/hljs';

<SyntaxHighLighter language="javascript" style={dracula}>
{
    "class HelloMessage extends React.Component {\n render() {\n return ( \n <div>\nHello {this.props.name}\n</div>\n);\n }\n}\n\nReactDOM.render(\n<HelloMessage name='Taylor' />,\ndocument.getElementById('hello-example')\n);"
  }
</SyntaxHighLighter>