Triple Code Block
zum einfügen von Code zum Kopieren
<section class="mbr-section article content10 codeview" group="Code Triple Final Highlight"><!-- 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="2"><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="80"></mbr-parameters><div class="container" mbr-style="{'padding-top': paddingTop + 'rem','padding-bottom': paddingBottom + 'rem'}"><div class="inner-container" mbr-style="{'width': innerWidth + '%'}"><!-- 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">Kopieren (HTML)</button><pre class="code-area language-html" mbr-text><div class="demo">Hallo Welt!</div></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">Kopieren (CSS)</button><pre class="code-area language-css" mbr-text>.demo {background: orange;padding: 20px;border-radius: 6px;color: white;}</pre></div><!-- JS-Code --><div class="code-box position-relative"><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">Kopieren (JS)</button><pre class="code-area language-javascript" mbr-text>document.addEventListener("DOMContentLoaded", () => {console.log("JS läuft!");});</pre></div></div></div><!-- Kopier-Skript (unverändert, funktioniert für alle Buttons) --><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>
/* === Volker Codeblock Triple + Highlight === */section.codeview { color:#eee; }section.codeview .code-area {background:#1e1e1e;color:#f8f8f2;font-family:Consolas,monospace;font-size:.9rem;line-height:1.4;padding:20px;border-radius:8px;overflow:auto;box-shadow:0 2px 8px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);max-height:70vh;white-space:pre;}/* Buttons */section.codeview .copy-btn {z-index:10;opacity:.9;transition:opacity .2s ease,transform .05s ease;}section.codeview .copy-btn:hover { opacity:1; }section.codeview .copy-btn:active { transform:translateY(1px); }section.codeview h5 { color:#ccc;font-weight:600; }/* Highlight.js Farben */section.codeview .hljs {background:#1e1e1e !important;color:#eaeaea;border-radius:8px;font-family:Consolas,monospace;font-size:.9rem;line-height:1.4;}section.codeview .hljs-tag,section.codeview .hljs-name { color:#569CD6; }section.codeview .hljs-attr,section.codeview .hljs-keyword { color:#9CDCFE; }section.codeview .hljs-string { color:#CE9178; }section.codeview .hljs-number,section.codeview .hljs-literal { color:#B5CEA8; }section.codeview .hljs-comment { color:#6A9955; }/* Scrollbar */section.codeview .code-area::-webkit-scrollbar { width:10px; height:10px; }section.codeview .code-area::-webkit-scrollbar-thumb { background:#3a3a3a; border-radius:8px; }section.codeview .code-area::-webkit-scrollbar-track { background:#1e1e1e; }@media(max-width:768px){section.codeview .code-area { max-height:60vh; padding:15px; }}
document.addEventListener("DOMContentLoaded", () => {
console.log("JS läuft!");
});