为什么我的 React 代码编辑器组件没有被 PrismJs 高亮显示？

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";

Answer 2

如@FlowRan 所述，您需要 import 您想要使用的任何主题但 注意：您不需要单独下载主题，因为它们随包一起提供。使用 import 语句从- 'prismjs/themes/prism-{theme-name}.css';

为什么我的 React 代码编辑器组件没有被 PrismJs 高亮显示？

Why is my React code editor component not highlighted by PrismJs?

javascript

reactjs

prismjs