Emmet does not use correct syntax highlighting

[mak0226]

I'm currently using @codemirror/theme-one-dark on Codemirror 6 alongside Emmet (implemented using the abbreviationTracker extension) and I've noticed that the syntax highlighting is incorrect. See below for images.

How it should look:

How it looks:

Thanks.

[sergeche]

You should pass syntax highlighting as option: abbreviation({ preview: { html: yourCustomHighighter } })

[shshaw]

Do you have an example of how exactly that should be used?

abbreviationTracker({
  preview: {
     html: // theme or language?
  }
});

[sergeche]

You should pass an extension factory function, which will be invoked when preview widget is created. E.g.

import { html } from '@codemirror/lang-html';
abbreviationTracker({
  preview: {
     html: html
  }
});

[shshaw]

Hm. But is that the way to actually load a theme? That would just be for the language syntax

[sergeche]

AFAIK there’s no such thing as theme or language syntax, only extensions. From factory function, you may return an extension or array of extensions, I think you may just define which extensions (syntax highlight, theme etc) you want to use in preview.