2

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:

  1. Importing hljs and link ref as per the docs in app to have global access.
  2. Importing hljs in module and calling hljs.initHighlightOnLoad() with link ref in App->Head tag
  3. 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

LuckyA
  • 35
  • 6

2 Answers2

1

Install highlight.js import its css .Example: import 'highlight.js/styles/monokai-sublime.css';

Adding something like this would work

const modules = {
  //syntax: true,
  syntax: {
    highlight: text => hljs.highlightAuto(text).value
  }
};
Prasun Das
  • 41
  • 2
0

We can add highlight to window on client side, so Solution is:

import hljs from "highlight.js";

const ReactQuill = dynamic(
    () => {
        hljs.configure({   // optionally configure hljs
            languages: ['javascript', 'php', 'go']
        })
        // @ts-ignore
        window.hljs = hljs
       return  import ("react-quill")
    }, {
    ssr: false,
    loading: () => <p>Loading</p>
})

const modules = {
  syntax: true,
  // ...
}
Warfacez
  • 29
  • 2