javascriptcodemirrorcodemirror-modes

CodeMirror Highlight specific Regex-Match


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


Solution

  • 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
    }