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

Question

I just discovered PrismJs and it looks perfect. But for some reason, it doesn't highlight my code in following component :

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>
  );
}

Is there anything missing to make it work ?

Answer 1

It's not specified on there npm page, but you need to download a themed CSS on there official site : PrismsJS Then, you just move the CSS file to your directory and import it in your component as usual :

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

Answer 2

as @FlowRan mentioned you need to import any theme you want to use but Note: you do not need to download the themes separately as they come with the package. Import your theme in your file by using the import statement from- 'prismjs/themes/prism-{theme-name}.css';