Syntax highlighting not working

[szlezakbartosz]

The syntax highlighting feature seems to be broken when using Quill in an Angular project (no wrappers, pure Quill.js):

Steps for Reproduction

1. Visit https://stackblitz.com/edit/stackblitz-starters-6ms8v9?file=src%2Fmain.ts
2. Create code-block, put some code in it, choose a language

It seems like the highlight.js function is not called at all as when inspecting the content there are no hljs css classes applied to the code-blocks:

Expected behavior: Code syntax should be highlighted.

Actual behavior: Code syntax is not highlighted.

Platforms: Chrome 126.0.6478.114, Windows 10, Angular 18

[webceoboy]

import 'highlight.js/styles/atom-one-dark.min.css'

[ViggieM]

import 'highlight.js/styles/atom-one-dark.min.css'

Worked for me

[szlezakbartosz]

Can you provide the example in Stackblitz? Does not seem to do the trick in the one I provided:

[ViggieM]

@szlezakbartosz Here you go

https://stackblitz.com/edit/vitejs-vite-8wsldsgr?file=src%2Flib%2FEditor.svelte

[szlezakbartosz]

Thank you :) Looks like the issue occurs when there is formats field specified in Quill config. The import you guys provided allowed me to make the highlighting work once I removed the formats. I also tried to add them in the example you provided @ViggieM and it caused highlighting to break there too! It's cool that I learned something new about the issue, but I unfortunately need to be able to restrict what formats can be used too :)

Here is the edited Stackblitz with two Quill editors: highlighting works in the second one, not in the first: https://stackblitz.com/edit/stackblitz-starters-ujtdnrep?file=src%2Fmain.ts