javascript - 为什么 PrismJs 没有突出显示我的 React 代码编辑器组件？

Question

我刚刚发现了 PrismJs，它看起来很完美。但由于某种原因，它没有在以下组件中突出显示我的代码：

import { useState, useEffect } from "react";
import Prism from "prismjs";

export default function EditCode() {
  const [content, setContent] = useState("");

  useEffect(() => {
    Prism.highlightAll();
  }, []);

  useEffect(() => {
    Prism.highlightAll();
  }, [content]);
  return (
    <section className="codeGlobalContainer">
      <textarea
        className="codeInput"
        value={content}
        onChange={(e) => setContent(e.target.value)}
      />
      <pre className="codeOutput">
        <code className={`language-javascript`}>{content}</code>
      </pre>
    </section>
  );
}

有什么东西让它工作吗？

Answer 1

它没有在 npm 页面上指定，但是您需要在官方网站上下载主题 CSS：PrismsJS 然后，您只需将 CSS 文件移动到您的目录并像往常一样将其导入组件中：

import "../../styles/prism.css";