Archiv-Modus von Basti1012 Lösungspage

Hallo, pre code Höhe begrenzen dann link als Auswahl zum kompletten Markieren des Codes Basis ist folgende <a href="https://codepen.io/elomatreb/pen/hbgxp">https://codepen.io/elomatreb/pen/hbgxp</a> Wie kann ich jetzt die Höhe begrenzen und ein Link z.B. oben Links ala "Alles Markieren" einfügend an auch der komplette Code markiert wird und nicht die ganze Seite. Ähnlich wie <a href="https://www.phpbb.de/community/viewtopic.php?f=85&t=202089">https://www.phpbb.de/community/viewtopic.php?f=85&t=202089</a> vielen Dank

Code

                                    
                                
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>ExecComander save </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="/js_webseite/jquery.js"></script>
  <style>
    body {
  background-color:white;
  padding:50px 50px;
  overflow:scroll;
  
  
  }

pre code,
pre .line-number {
  font:normal normal 12px/14px "Courier New",Courier,Monospace;
  color:black;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  border-right:1px solid;
  text-align:right;
}

pre .line-number span {
  display:block;
  line-height:16px;
  padding:0 .5em 0 1em;
}



#conti{
  position:absolute;
  left:10px;
  top:10px;
  
}



.tool{
    height:auto;
    width:400px;
    background:#2E3732;
	color: #FFFFFF;
 border-radius:10px;
    position:absolute;
 border:2px solid black;
  font-size:16px;
	z-index: 1000;
	padding: 5px;
display:none;
}
::selection {
  color: white;
  background-color: green;}
  .sele{
  color: white;
  background-color: green;}
  textarea{
    position:relative;
    top:-20px;
    left:-13px;
    width:600px;
    line-height:16px;
    overflow:hidden;
  }
  #mark{
   margin-left:45%;
  }
  
  #copyy{
    position:absolute;
   right:-18px;
    top:28px;
    z-index:2;
    cursor:pointer;
  }
  #loschen{
      position:absolute;
   right:0px;
    top:28px;
    z-index:2;
    cursor:pointer;
  }
    textarea{
      top:0 !important;
    }
  </style>

</head>
<body>
    <div id="conti">
 <a href="#" id="mark">Auswahl Makieren und Kopieren</a>
      <br><br><br>
 <div>

<div id="copyy">

<img id="bild1" width="20" height="" title="Zwischenablage Löschen" src="/image/500_F_141753554_Kq1Vea3U7M3kqRxeoAJgbLl3CyXzTW2e.jpg">


 <img id="bild2" width="20" height="" title="Diesen Code in der Zwischenablage Kopieren" src="/image/option-kopieren-von-dokumenten_318-48804.webp">
</div>


<pre>
<textarea id="code">
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i  pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + ' 
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j  num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>' 
        }
    }
     for (var i = 0; i  pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + ' 
        var num = pre[i].innerHTML.split(/\n/).length;
        for (var j = 0; j  num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>' 
        }
    }

</textarea></pre>
</div> </div>

<span class="tool">Der Text wurde in der zwischenablage Kopiert</span>
 <script>

(function() {
    var pre = document.getElementsByTagName('pre'),
        pl = pre.length;
    for (var i = 0; i < pl; i++) {
        pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
        var num = pre[i].innerHTML.split(/\n/).length;
        $('#code').css('height',num*16+'px');
        for (var j = 0; j < num; j++) {
            var line_num = pre[i].getElementsByTagName('span')[0];
            line_num.innerHTML += '<span>' + (j + 1) + '</span>';
        }
     }
 
  
 $('#bild1').click(function(){
 var text=" ";
 asave(text);
 });
 
 
 
 $('#mark,#bild2').click(function(){
//$('#code').select();
   text=$('#code').html();
asave(text);
 
$(".tool").css("left",event.pageX+"-100px");
$(".tool").css("top",event.pageY+"px");
$(".tool").fadeIn("fast");
$('#code').addClass('sele'); 
function close(){
    $(".tool").fadeOut("fast");
    $('#code').removeClass('sele'); 
}   
setTimeout(function(){close();},2000);

});
 
function asave(text){

  var textarea = document.createElement("textarea");
  textarea.value = text;
 
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);
}
 
 
})();
</script>

</body>
</html>

basti1012.bplaced.net

pre code

Code