MediaWiki:PreMarkup.js

$(document).ready(function () {

    $('pre').each(function () {

        var $this = $(this)

        var OriginalText = $this.html();

        $this.parent(".mw-collapsible-content").show(); /// temporary show collapsible content to read its location....
        $this.parent().parent(".mw-collapsible-content").show(); /// temporary show collapsible content to read its location....

        function returnBoxedText(match, p1) { return '' + p1 + ''; }
        function returnSpanPosStr(match, p1) {
            var MarginTop = 0;
            var MarginLeft = 0;
            var Rotation = 0;
            switch (p1) {


                case "":
                    MarginTop = 5;
                    MarginLeft = 5;
                    Rotation = 225;
                    break;
                case "-tr":
                    MarginTop = 5;
                    MarginLeft = 5;
                    Rotation = 225;
                    break;
                case "-br":
                    MarginTop = 20;
                    MarginLeft = 0;
                    Rotation = 315;
                    break;
                    break;
                case "-bl":
                    MarginTop = 10;
                    MarginLeft = -5;
                    Rotation = 45;
                    break;
                case "-tl":
                    MarginTop = 0;
                    MarginLeft = -5;
                    Rotation = 135;
                    break;
            }


            return '<point-here class="pre-arrow" orientation="' + p1 + '" style="position:absolute; maring-left: ' + MarginLeft + 'px; margin-top: ' + MarginTop + 'px; transform: rotate(' + Rotation + 'deg); transform-origin: 0% 0%;">&nbsp</point-here>';
        }

        var newText = OriginalText.replace(/&lt;box&gt;(.*)&lt;\/box&gt;/g, returnBoxedText);
        newText = newText.replace(/&lt;point-here(\S*)&gt;/g, returnSpanPosStr);
        $this.html(newText);


        $this.find('box').each(function () {
            posTop = $(this).position().top - 3;
            posLeft = $(this).position().left - 3;
            boxWidth = $(this).width();
            $this.append('<div  style="padding:1px;  padding-left:2px; border: 2px solid red; border-radius: 5px; box-shadow: 0.5px 0.5px 5px 0.5px red; position: absolute; left: ' + posLeft + 'px; top: ' + posTop + 'px; width:' + boxWidth + 'px;">&nbsp</div>');
        });
    });
});