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

Ananth · Answer

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
}

CodeMirror Highlight specific Regex-Match

One Answer

Add your own answers!

Ask a Question