CodeMirror Highlight specific Regex-Match

Question

I'm trying to highlight all %()% substrings in the htmlmixed mode. The matching RegExp is ([%(](.*)[)%]).

Here's the code i'm using for CodeMirror:

const code = CodeMirror.fromTextArea(document.querySelector("#id"), {
     theme: "dracula",
     mode: "text/html",
     lineNumbers: true,
     firstLineNumber: 1,
     spellcheck: false,
     autocorrect: true,
     extraKeys: { "Ctrl-Space": "autocomplete" },
     styleActiveLine: true,
     highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }
});

Thanks

Answer 1

You have to add a style property in highlightSelectionMatches.

const code = CodeMirror.fromTextArea(document.querySelector("#id"), {
     theme: "dracula",
     mode: "text/html",
     lineNumbers: true,
     firstLineNumber: 1,
     spellcheck: false,
     autocorrect: true,
     extraKeys: { "Ctrl-Space": "autocomplete" },
     styleActiveLine: true,
     highlightSelectionMatches: { 
          minChars: 2,
          showToken: /\w/,
          style:'matchhighlight',
          annotateScrollbar: true
    }
});

Add below in css:

.cm-matchhighlight {
  background: red !important
}