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:
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 ๐