Acabo de descubrir PrismJs y se ve perfecto. Pero por alguna razón, no resalta mi código en el siguiente componente:
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> ); }
¿Falta algo para que funcione?
como mencionó @FlowRan, debe import
cualquier tema que desee usar, pero tenga en cuenta: no es necesario que descargue los temas por separado, ya que vienen con el paquete. Importe su tema en su archivo usando la declaración de import
de- 'prismjs/themes/prism-{theme-name}.css';