Ngx-quill: RROR Error: Syntax module requires highlight.js. Please include the library on the page before Quill.

[simplew11]

Hey KillerCodeMonkey,

AppComponent.html:65 ERROR Error: Syntax module requires highlight.js. Please include the library on the page before Quill.
at new Syntax (quill.js:11072)
at SnowTheme.addModule (quill.js:6057)
at SnowTheme.addModule (quill.js:6701)
at quill.js:6049
at Array.forEach ()
at SnowTheme.init (quill.js:6047)
at new Quill (quill.js:1113)
at QuillEditorComponent.push../node_modules/ngx-quill/fesm5/ngx-quill.js.QuillEditorComponent.ngAfterViewInit (ngx-quill.js:281)
at callProviderLifecycles (core.js:20982)
at callElementProvidersLifecycles (core.js:20956)
Thank!

[KillerCodeMonkey]

yeah and?

check the error message... everythinf is there... You are trying to use the syntax highlight module (code highlighting) and forgot to include highlight.js..

Check out my demo repo, there is an example and you see how to do it or checkout quilljs docu about syntax module.

[simplew11]

Please tell me what to install

[simplew11]

Please tell me what to install

[KillerCodeMonkey]

https://quilljs.com/docs/modules/syntax/#syntax-highlighter-module
https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/index.html#L12
https://github.com/KillerCodeMonkey/ngx-quill-example/blob/master/src/app/formula/formula.component.ts

[SibeeshVenu]

If you don't need a syntax highlighting, you can remove the syntax: true from the module configuration. This will fix the issue.

QuillModule.forRoot({
      modules: {
        syntax: false,
        toolbar: [['bold', 'italic', 'underline'],
        [{ 'list': 'bullet' }],
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'font': [] }],
        [{ 'align': [] }]]
      }
    })

[KillerCodeMonkey]

but per default the syntax module should not be enabled?

[SibeeshVenu]

but per default the syntax module should not be enabled?

Yes, I agree. But in my case, I didn't need that. And to fix this error I just had to remove syntax: true. Or at the safer side, I guess I should make it false instead of removing it.

[KillerCodeMonkey]

or simply not add the module to your config :D, when you do not what it is doing. 🤷‍♂️

Have a nice day

[SibeeshVenu]

or simply not add the module to your config :D, when you do not what it is doing. 🤷‍♂️

Have a nice day

I had to do this QuillModule.forRoot({ to make only needed options in my toolbar. Have a nice day to you too.

[augustoantunes]

mas, por padrão, o módulo de sintaxe não deve ser ativado?

Sim eu concordo. Mas no meu caso, eu não precisava disso. E para corrigir este erro, eu apenas tive que remover syntax: true. Ou pelo lado mais seguro, acho que devo fazê-lo em falsevez de removê-lo.

Eu também removi e funcionou

[Juraj-Masiar]

For those of you facing this problem with TypeScript and Webpack, know that syntax accepts also object with highlight function.

syntax: {
  highlight: (text: string) => hljs.highlightAuto(text).value,
},

https://codesandbox.io/s/nww9q0v67p?from-embed=&file=/src/index.js

[Sangram9693]

nice article for code highlighting