User:Polygnotus/Scripts/ReferenceHighlighter.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
//perhaps add this to duplicatereferences

// Wikipedia Reference Highlighter
$(function() {
    // Function to highlight all references with the same base ID
    function highlightReferences(baseId, clickedElement) {
        // Remove previous highlights
        $('.reference-highlight, .reference-highlight-clicked').removeClass('reference-highlight reference-highlight-clicked');
        
        // Highlight all references with the same base ID in the main text
        $('sup.reference a[href^="#cite_note-' + baseId + '"]').each(function() {
            $(this).closest('sup').addClass('reference-highlight');
        });
        
        // Highlight the reference in the list at the bottom
        var citationElement = $('#cite_note-' + baseId);
        citationElement.addClass('reference-highlight');
        
        // Highlight all the "Jump up to" links in the current reference
        citationElement.find('.mw-cite-backlink a').each(function() {
            $(this).addClass('reference-highlight');
        });
        
        // Highlight the clicked element differently
        $(clickedElement).addClass('reference-highlight-clicked');
    }
    
    // Add click event listener to all reference links in the main text
    $('sup.reference a').on('click', function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        var baseId = href.split('-')[1].split('#')[0];
        highlightReferences(baseId, this);
        
        // Scroll to the reference list item
        var target = $(href);
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    });
    
    // Add click event listener to the "Jump up to" links in the references section
    $('.mw-cite-backlink a').on('click', function(e) {
        e.preventDefault();
        var href = $(this).attr('href');
        var baseId = $(this).closest('li').attr('id').split('-')[1];
        highlightReferences(baseId, this);
        
        // Scroll to the reference in the main text
        var target = $(href);
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    });
    
    // Add necessary CSS
    $('<style>')
        .prop('type', 'text/css')
        .html(`
            .reference-highlight {
                background-color: purple !important;
                color: white !important;
            }
            .reference-highlight a {
                color: white !important;
            }
            .reference-highlight-clicked {
                background-color: orange !important;
                color: black !important;
            }
            .reference-highlight-clicked a {
                color: black !important;
            }
        `)
        .appendTo('head');
});