javascriptreactjsprismjs

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

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 ?

Solution

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