How to preserve colors when paste into Quill code-block?

Question

I copy code from VSCode to Quill, it has a nice color scheme. But when I enable code-block, it becomes just dark and boring. Is there any way to preserve original colors?

Answer 1

The colorscheme you see in VSCode is what's called syntax highlighting, and its done dynamically, i.e. is procedural and only "exists" in VSCode as it reads that code and displays it to you in some kind of visual buffer.

Typically, when working with code snippets/markup/markdown and a clipboard which copies and pastes, its pretty much just the text. Code, like this html code you are working with here, is never what is called rich text. Mainly because rich text is already a kind of code! It is something which defines the bold and colored aspects of your text (or image uris, links, etc), that, when you see it in Word or your web browser, it is something that has been parsed as a code and turned into a presentation of formatted text (in a way, the entire history of software and/or application development revolves around this very idea, consider the history of WYSIWG).

For this reason, something like html markup existing in your IDE which is itself only a "representation" of html markup, would be quite a weird thing that would be complicated to handle, not to mention quite distressing ontologically in coding world.

What you need is something that will reproduce the same procedural syntax highlighting you see in VSCode within css/js within Quilljs, and... your in luck!

https://quilljs.com/docs/modules/syntax/

That seems to be what you need, and you can even configure it to the exact colors you like in VSCode with some patience. (Quill is using the highlight.js library internally, as the module description page notes, so thats why the config link is pointing to those docs.)