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 ?
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';