How to override specific Highlight-Tags?

Following this exaple here I’m able to style the Highlights for specific tags:

const customHighlightStyle = HighlightStyle.define([
        { tag: tags.keyword, color: "#fc6" },
        { tag: tags.comment, color: "#008000", fontStyle: "italic" }
]);

const initialState = EditorState.create({
        doc: "/* example text */",
        extensions: [
            syntaxHighlighting(customHighlightStyle, { fallback: true }),
            java(),
            /* ... */],
});

new EditorView({
        parent: document.querySelector("#code-mirror"),
        state: initialState,
});

Unfortunately, going this way means that all prior hightlight settings are gone and I’d have to style all tags from scratch. So I have some questions in the hope, someone can help:

  1. Is there a way to provide the current style as fallback for tags which I don’t explicitly override?
  2. Where can I obtain a complete tag list for a specific language, im my case for Java?
  3. Where can I obtain all the currently defined styles? (Is there a css or something else where I can look up current settings?)

Many thanks for any help,
Slevin

The default highlight style can be included in a configuration via syntaxHighlighting. The basic setup does this with the fallback flag set, so that it only takes effect if it is the only highlight style, but if you do it normally the two should combine.

1 Like

Hi marijn, thank you for your time.

So when I do the setup as follows, I’ll get the default styling:

syntaxHighlighting(defaultHighlightStyle, { fallback: true })

But how do I now add my custom style in addition? Putting two syntaxHighlighting into the setup unfortunately doesn’t do the trick (at least no one can say I haven’t tried ;)):

syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
syntaxHighlighting(customHighlightStyle)

Do I miss something here?

You’re still enabling fallback. Don’t.

1 Like

Yes, I have tried with and without fallback option, but the outcome was always the same. Now that you’ve confirmed that it is possible to provide syntaxHighlighting two times, I’ve played further on and came to the following working solution:

syntaxHighlighting(customHighlightStyle),
syntaxHighlighting(defaultHighlightStyle),

As you can see, I have to put my custom highlight style first and the default one second. This, at least to me, seems a bit odd, since usually you set up default setting first and override the params with your custom ones. But here you have to put your custom ones first.

However, it works, and I’m really thankful for this great editor. Compared to other ones it’s leightweight, fast and I hope highly customizable. I’m pretty sure I will come up with more questions in the near future… :wink:

Thanks again and have a nice day