我尝试在一个react项目中使用PrimsJs，我的目标是创建一个静态模板页面，并添加代码片段，我不确定是否是最佳选项（primsJs），但我尝试自动缩进代码，因为实际上我的代码在一行中呈现

这是我的主页

import { MainLayout } from "../components/layouts/MainLayout";
import { Hero1, Hero1Code} from "../theme/blocks/hero/Hero1";

export default function Home() {
    return (
        <MainLayout>
            <h1>Home Page</h1>
            <Hero1 />
            <Hero1Code />
        </MainLayout>
    );
}

这是我的PRIMSJS组件

import React, { useEffect } from "react";
import Prism from "prismjs";
import "prismjs/themes/prism-tomorrow.css";

export default function Code({ code, language }) {
  useEffect(() => {
    Prism.highlightAll();
  }, []);

  return (
    <div className="Code">
      <pre>
        <code className={`language-${language}`}>{code}</code>
      </pre>
    </div>
  );
}

这是我的组件

import React from "react";

import { renderToString } from "react-dom/server";
import Code from "../../../components/prism/code";

export const Hero1 = () => {
    return (
        <section className="wrapper bg-light">
           ...
        </section>

    );
};

export const Hero1Code = () => {
    const content = renderToString(<Hero1/>);
    return (
        <>
            <div className="App">
                <Code code={content} language="html" />
            </div>
        </>
    );
};

型
任何帮助将是非常欢迎的，我也开放尝试其他包