basti1012.bplaced.net

Ich möchte Kollegen HTML Codes zur Verfügung stellen. Soll als HTML Quellcode angezeigt werden und wenn man drauf klickt ist der Text im Zwischenspeicher.

Code

                                    
                                <style>
body {
  background: #f1f2f6;
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  line-height: normal;
}
  pre{
    height:300px;
    width:80vw;
    border:1px solid black;
    overflow:auto;
  }
  #info{
    height:100px;
    width:300px;
    padding:10px;
    font-size:30px;
    boder:1px solid red;
    background:black;
    color:white;
    position:fixed;
    top:0;
    right:0;
    display:none;
  }
  pre:hover{
    cursor:pointer;
  }
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Click ,and copy to clipboard';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}






pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}


</style>
Klick auf den Code um ihn zu kopieren
<h4>Code1</h4>
<pre title="HTML" data-codetype="HTMLku"><code id="codeblock1"></code></pre>
<h4>Code2</h4>
<pre title="HTML" data-codetype="HTMLku"><code id="codeblock2"></code></pre>
<div id="info"></div>

<script>
  var code=[`<button onclick="myFunction()">Click me</button>`,`<style>
  pre{
    height:300px;
    margin-top:100px;
    width:80vw;
    border:1px solid black;
    overflow:auto;
  }
  #info{
    height:100px;
    width:300px;
    padding:10px;
    font-size:30px;
    boder:1px solid red;
    background:black;
    color:white;
    position:fixed;
    top:0;
    right:0;
    display:none;
  }
  pre:hover{
    cursor:pointer;
  }
</style><main>
Klick auf den Code um ihn zu kopieren
<pre id="codeblock1"></pre>
<pre id="codeblock2"></pre>
<div id="info"></div></main>`];


function htmlEntities(str) {
    return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
document.getElementById('codeblock1').innerHTML=htmlEntities(code[0]);

var cod1=document.getElementById('codeblock2').innerHTML=htmlEntities(code[1]);

var pre=document.querySelectorAll('pre');
pre.forEach(function(a,index){
  a.addEventListener('click',function(){

var val=document.createElement('input'); 
val.type="text";
val.value=code[index];
    
var inf=document.getElementById('info');
    inf.innerHTML='Code '+(index+1)+' kopiert'; 
    inf.style.display='block';
  setTimeout(function(){
    inf.style.display='none'; 
  },1500)  
    
document.getElementsByTagName('body')[0].append(val);
val.select();
document.execCommand("copy");  
   val.remove(); 
    
    
    
  })
})

  
</script>