Question

0

485

Visualizações

React-Quill can't highlight syntax with highlightJS in NextJs

I have a NextJs app (blog) and I'm using react-quill as a rich text-editor in it. I'm using a Next custom 'app' feature where my UserProvider comp is wrapping the everything so i can have global access to certain things. My next/head comp is also there.

Been reading the docs on Quill -Syntax and Highlight.Js on usage but for the life of me keep getting 'Error: nextjs Syntax module requires highlight.js' what am I missing here? This is how my app component look:

_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>
  );
}

Things I tried:

Importing hljs and link ref as per the docs in app to have global access.
Importing hljs in module and calling hljs.initHighlightOnLoad() with link ref in App->Head tag
Using hljs Script with next/script and link ref (as per highlightjs docs) in my App comp.

Any help here? I have my Quill module customized so it includes ['code-block'] therefore I am already able to have code snippets but they are white font/black background only. This is my custom module for quill (syntax:true is commented out so far for obvs reasons)

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'],
    ],
  };

Appreciate if anyone knows, this has been doing my head all of yesterday 😅

about 4 years ago · Juan Pablo Isaza

Responde à pergunta

0

485

React-Quill can't highlight syntax with highlightJS in NextJs

Encontrar trabalhos remotos

Andres GPT