The CodeMirror editor provides a simple way to find matching tags with the addon method tagRangeFinder. You need to include the script file codemirror/addon/fold/xml-fold.js for the following code to work.

ed.editor refers to the CodeMirror object. I still need to figure out a way to underline or highlight the tags themselves instead of the lines. And it'd be nice to be able to reverse the search to see the opening tag when clicking on the closing tag.

    var startTagMarker = $("<div style='color:yellow;font-size:12pt;'>⬇</div>");
    var endTagMarker = $("<div style='color:yellow;font-size:12pt;'>⬆</div>");
    ed.editor.on("cursorActivity", function() {
        if (ed.editor.somethingSelected()) return;
        var c = ed.editor.getCursor();
        var tr = CodeMirror.tagRangeFinder(ed.editor, {line:c.line,ch:0});
        if (tr) {
            //ed.editor.addWidget(tr.from, startTagMarker[0], false);
            //ed.editor.addWidget(tr.to, endTagMarker[0], false);
            ed.editor.clearGutter("tagranges");
            ed.editor.setGutterMarker(tr.from.line, "tagranges", startTagMarker[0]);
            ed.editor.setGutterMarker(tr.to.line, "tagranges", endTagMarker[0]);
        } else {
            startTagMarker.remove(); endTagMarker.remove();
        }
    });

Kommentare