<!-- Syntax Highlighting -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<script>

document.addEventListener("DOMContentLoaded", () => {

document.querySelectorAll("pre.code-area").forEach(el => hljs.highlightElement(el));

});

</script>

<mbr-parameters>

<input type="range" inline title="Abstand oben" name="paddingTop" min="0" max="8" step="1" value="6">

<input type="range" inline title="Abstand unten" name="paddingBottom" min="0" max="8" step="1" value="2">

<input type="range" inline title="Textbreite (%)" name="innerWidth" min="50" max="100" step="5" value="100">

</mbr-parameters>

<div class="container" mbr-style="{'padding-top': paddingTop + 'rem','padding-bottom': paddingBottom + 'rem'}">

<div class="inner-container" mbr-style="{'width': innerWidth + '%'}">

<!-- HEAD-Code -->

<div class="code-box position-relative mb-4">

<h5 class="text-light mb-2">HEAD-Code</h5>

<button class="copy-btn btn btn-sm btn-info position-absolute top-0 end-0 m-2" data-target="head" data-bs-target="head">Kopieren (HEAD)</button>

<pre class="code-area language-html" mbr-text><code>&lt;head&gt;

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Meine Seite&lt;/title&gt;

&lt;link rel="stylesheet" href="style.css"&gt;

&lt;/head&gt;</code></pre>

</div>

<!-- HTML-Code -->

<div class="code-box position-relative mb-4">

<h5 class="text-light mb-2">HTML-Code</h5>

<button class="copy-btn btn btn-sm btn-primary position-absolute top-0 end-0 m-2" data-target="html" data-bs-target="html">Kopieren (HTML)</button>

<pre class="code-area language-html" mbr-text><code>&lt;div class="demo"&gt;Hallo Welt!&lt;/div&gt;</code></pre>

</div>

<!-- CSS-Code -->

<div class="code-box position-relative mb-4">

<h5 class="text-light mb-2">CSS-Code</h5>

<button class="copy-btn btn btn-sm btn-success position-absolute top-0 end-0 m-2" data-target="css" data-bs-target="css">Kopieren (CSS)</button>

<pre class="code-area language-css" mbr-text><code>.demo {

background: orange;

padding: 20px;

border-radius: 6px;

color: white;

}</code></pre>

</div>

<!-- JS-Code -->

<div class="code-box position-relative mb-4">

<h5 class="text-light mb-2">JavaScript-Code</h5>

<button class="copy-btn btn btn-sm btn-warning position-absolute top-0 end-0 m-2" data-target="js" data-bs-target="js">Kopieren (JS)</button>

<pre class="code-area language-javascript" mbr-text><code>document.addEventListener("DOMContentLoaded", () =&gt; {

console.log("JS läuft!");

});</code></pre>

</div>

<!-- PHP-Code -->

<div class="code-box position-relative">

<h5 class="text-light mb-2">PHP-Code</h5>

<button class="copy-btn btn btn-sm btn-danger position-absolute top-0 end-0 m-2" data-target="php" data-bs-target="php">Kopieren (PHP)</button>

<pre class="code-area language-php" mbr-text><code>&lt;?php

echo "Hallo Welt aus PHP!";

?&gt;</code></pre>

</div>

</div>

</div>

<!-- Kopier-Skript -->

<script>

(function(){

function copyText(txt){

if (navigator.clipboard && navigator.clipboard.writeText) {

return navigator.clipboard.writeText(txt).catch(()=>fallback(txt));

}

return fallback(txt);

}

function fallback(txt){

const ta=document.createElement("textarea");

ta.value=txt;

ta.style.position="fixed";ta.style.opacity="0";

document.body.appendChild(ta);ta.select();

try{document.execCommand("copy");}catch(e){}

document.body.removeChild(ta);

return Promise.resolve();

}

document.addEventListener("click",e=>{

const btn=e.target.closest(".copy-btn");

if(!btn)return;

const block=btn.closest(".code-box");

if(!block)return;

const pre=block.querySelector("pre.code-area");

const code=pre.textContent.trim();

copyText(code).then(()=>{

const old=btn.textContent;

btn.textContent="Kopiert!";

btn.classList.add("btn-dark");

setTimeout(()=>{

btn.textContent=old;

btn.classList.remove("btn-dark");

},1200);

});

});

})();

</script>

</section>