Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

484
Views
React-Quill no puede resaltar la sintaxis con HighlightJS en NextJs

Tengo una aplicación NextJs (blog) y estoy usando react-quill como editor de texto enriquecido. Estoy usando una característica de 'aplicación' personalizada de Next donde mi composición de UserProvider envuelve todo para que pueda tener acceso global a ciertas cosas. Mi siguiente compilación principal también está allí.

He estado leyendo los documentos sobre Quill -Syntax y Highlight.Js sobre el uso, pero por mi vida, sigo recibiendo ' Error: el módulo de sintaxis nextjs requiere resaltar.js ', ¿qué me estoy perdiendo aquí? Así es como se ve el componente de mi aplicación:

_app.js:

 function MyApp({ Component, pageProps }) { return ( <UserProvider> <Head> <link rel='stylesheet' href='/css/styles.css' /> </Head> <Nav /> <ToastContainer position='top-center' autoClose={2000} pauseOnFocusLoss={false} pauseOnHover={false} theme='dark' transition={Zoom} /> <Component {...pageProps} /> </UserProvider> ); }

Cosas que probé:

  1. Importando hljs y link ref según los documentos en la aplicación para tener acceso global.
  2. Importando hljs en el módulo y llamando a hljs.initHighlightOnLoad() con la referencia del enlace en la etiqueta App->Head
  3. Uso de hljs Script con next/script y referencia de enlace (según los documentos de Highlightjs) en la composición de mi aplicación.

¿Alguna ayuda aquí? Tengo mi módulo Quill personalizado, por lo que incluye ['code-block'], por lo tanto, ya puedo tener fragmentos de código, pero solo tienen fuente blanca/fondo negro. Este es mi módulo personalizado para quill (syntax:true está comentado hasta ahora por razones obvias)

 const customPostToolbar = { // syntax: true, toolbar: [ [{ header: [2, 3, false] }], ['bold', 'italic', 'underline', 'strike', 'blockquote'], [ { script: 'sub' }, { script: 'super' }, { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }, ], ['link', 'image'], ['code-block'], ], };

Agradezco si alguien sabe, esto me ha estado dando vueltas en la cabeza todo el día de ayer 😅

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!