stackoverflow.user.js

// ==UserScript==
// @name         New script - stackoverflow.com
// @namespace    SO Code Context Highlight
// @match        https://stackoverflow.com/questions/*
// @downloadURL  https://nt4.com/monkey/stackoverflow.user.js
// @version      0.5
// @description  visual studio style highlight of terms matching cursor(mouse) position
// @author       sfinktah
// @require      https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.11.0/underscore-min.js
// @grant        GM_addStyle
// @grant        GM_log
// @grant        unsafeWindow
// @description 2/23/2021, 11:41:54 AM
// ==/UserScript==

(function(w, $, underscore) {
    let block = "pre.hljs > code";

    var log = function(msg) {
        if (w.console) {
            w.console.log(msg);
        } else if (typeof GM_log === "function") {
            GM_log(msg);
        } else if (typeof console === "function") {
            console(msg);
        } else {
            throw new Error(msg);
        }
    };
    try {
        log("Loaded underscore version " + underscore.VERSION);
        log("Loaded jQuery     version " + $.fn.jquery);
        w._ = _;
    } catch (error) {
        log("Exception", error);
    }
    'use strict';

    setTimeout(function() {
        $(block).contents().each(function(index, e) {
            if (e.nodeType == 3) {
                $(e).wrap($("<span class='pln'>"));
            }
        });
    }, 1000);

    $.extend({
        seperateTrim: function(currentElem, newTagObj, keepProps) {
            var $currentElem = $(currentElem);
            if ($currentElem.children().length == 0 && $currentElem.text().trim().length) {

                var s = currentElem.innerText.split(/([^\w]+)/).filter((x) => x.length);
                var s2 = s.reduce(function(memo, value) {
                    var s3 = value.split(/(\s+)/).filter((x) => x.length);
                    return memo.concat(s3);
                }, []);
                var $newTag;
                s = s2;

                if (s.length > 1) {
                    var $newTags = $('<span>');
                    for (var i = 0; i < s.length; ++i) {
                        if (!s[i].trim().length) {
                            $newTag = $(newTagObj).clone();
                            $newTag.text(s[i]);
                            $newTags.append($newTag);
                        } else {
                            $newTag = $(currentElem).clone();
                            $newTag.text(s[i]);
                            $newTags.append($newTag);
                        }
                    }
                    $currentElem.replaceWith($newTags.children());
                }
            }
            // return node; (Error spotted by Frank van Luijn)
            return this; // check SO article
        }

    });

    $.fn.extend({
        seperateTrim: function(newTagObj, keepProps) {
            return this.each(function() {
                $.seperateTrim(this, newTagObj, keepProps);
            });
        }
    });

    var onHover = function(e) {
        console.log(e);
        var src = e.srcElement || e.currentTarget;
        var contents = src.innerText.trim();
        var className = src.className;
        var tagName = src.tagName;
        var active = e.type == "mouseenter";

        if (className == "space")
            return;

        var $elements = $(src.parentNode).find(`${tagName}`);
        if (!active) $(".similar").removeClass("similar");
        else $elements.filter(function() {
            return this.innerText.trim() == contents;
        }).addClass("similar");
    };


    $(function() {
        setTimeout(function() {

            console.log("Running stuff");
            let block = "pre.hljs > code";
            $(`${block} > span.pln`).seperateTrim($('<span class="space">'), false);

            $(`${block} > span`).hover(onHover);
        }, 2000);

    });
    GM_addStyle(`
        span.similar {
            background-color: #ccc;
        }
        tr.t-dsc-header > td:nth-child(1) > div {
            font-size: 2em;
            height: 1em;
            margin-left: 0;
        }
    `);
}((unsafeWindow || window), jQuery, (this._ || _ || unsafeWindow._)));