Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

493
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda