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....

function returnBoxedText(match, p1) { return '<box>' + p1 + '</box>'; }
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;
                            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>' );
});



});

});