CodeMirror2 match highlighting CSS

by secretgspot

HTML

<pre>
<span class=a>$</span><span>.</span><span class=d>ajax</span><span class=b>(</span><span class=c>"/test"</span><span class=b>)</span><span>.</span><span class=d>done</span><span class=b>(</span><span class=e>doneFunc</span><span class=b>)</span><span>;</span>
</pre>

CSS

body {
    padding: 10px;
}

pre {
    font-size: 100%;
    font-family: Monaco, Menlo, "Andale Mono", "lucida console", "Courier New", monospace;
    margin-bottom: 1px;
}

.a { color: #000; }
.b { color: #f70; }
.c { color: #0a0; }
.d { color: #000; }
.e { color: #a0a; }

.select .highlight {
    background: yellow;
}

.match .highlight {
    background: #fff;
    border: 2px solid #0a0;
    margin: -2px;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.match .highlight + .highlight {
    position: relative;
    margin-left: -1px;
    padding-left: 1px;
    
    border-left: none;
       -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
           -moz-border-radius-topleft: 0;
        -moz-border-radius-bottomleft: 0;
               border-top-left-radius: 0;
            border-bottom-left-radius: 0;
}

/* super ocd */
.match .highlight + .highlight:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2px;
    width: 2px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

JavaScript

var first = $("pre").first();
first.clone().addClass("select").appendTo("body");
first.clone().addClass("match").appendTo("body");
first.clone().addClass("match").appendTo("body");
first.addClass("match");
    
var start = 2;
var end = 10;
var i;
var spans = $("pre span");
(function loopy() {
    var delay = i > end - 1 ? 750 : 100;
    if (i == null || i++ > end) {
        i = start;
        spans.removeClass("highlight");
    } else {
        spans.filter(":nth-child(" + i + ")").addClass("highlight");
    }
    setTimeout(loopy, delay);
}());