MathJax variable highlighting logic

highlighter.js

(function($){
    // MathJax highlighting jQuery plugin
    // Highlights variables that are related to each other
    // i.e. all variables that are the same and have superscript
    // Note: Variables that have subscript are treated as a different
    // variable
    $.fn.highlighter = function(opts){
        // Override defaults
        opts = $.extend({
            color: '#08c',
            wrapper: $('body'),
            exclude: ['d','D']
        }, opts);

        // Scope variables related to the element of the plugin
        var $el = $(this);
        var match = $el.text();

        // Test if the element is subscript and not superscript
        var isSubscript = function(el){
            var $sub = el.closest('.msubsup');
            var subel = $sub.find('> span > span');
            var first = parseFloat(subel[0].style.top);
            var second = parseFloat(subel[1].style.top);
            if(first < second) {
                return true;
            } else {
                return false;
            }
        }

        // Highlight subscript variables as these are different objects
        // to normal variables
        var highlightSubscript = function(sub){
            opts.wrapper.find('.MathJax').find('.mi').each(function(){
                var $mi = $(this);
                var $misub = $mi.closest('.msubsup');
                if(sub.find('.mi').text() === $misub.find('.mi').text()){
                    $misub.find('.mi, .mn').css({'color':opts.color});
                }
            });
        }

        // Find every occurence of a variable and highlight it if it is not
        // a subscript
        var highlightAll = function(){
            opts.wrapper.find('.MathJax').find('.mi').each(function(){
                var $mi = $(this);
                if($mi.text() === match){
                    var $misub = $mi.closest('.msubsup');
                    if($misub.length == 0){
                        $mi.css({'color':opts.color});
                    } else {
                        if(!isSubscript($mi)){
                            $misub.find('.mi').css({'color':opts.color});
                        }
                    }
                }
            });
        }

        // Executes the highlighting logic if the current letter
        // is not part of the excluded letters
        if(opts.exclude.indexOf(match) == -1){
            var sub = $el.closest('.msubsup');
            if(sub.length > 0 && isSubscript($el)) {
                highlightSubscript(sub);
            } else {
                highlightAll($el);
            }
        }
    }
})(jQuery);

// VARIABLE HIGHLIGHTING - via highlighter.js
// The wrapper is where to limit the highlighting to
var $wrapper = $('body');
// Bind to live event as the elements only are viewed once
// MathJax has loaded via ajax
$wrapper.find('.MathJax .mi').live({
    // Highlight all variables (except subscript) on mouseover
    mouseover: function(){
        $(this).highlighter();
    },
    // Clear highlighting of matching variables on mouseout
    mouseout: function(){
        $(this).highlighter({
            color: 'initial'
        });
    }
});

http://codepen.io/zephyr/pen/mPpjeP

See it in action here