Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

488
Vistas
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
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda