Moin,
hier Dein Quellcode von Deiner Beispiel-Webseite.
Die ganzen
</div><div> vorne wurden bei mir nicht generiert und wieso ist der zu kopierende Text denn überhaupt in Deinem Quellcode
maskiert (HTML-Sonderzeichen) formatiert:
Code: Alles auswählen
zum Beispiel anstelle von:
</script>
eben maskiert:
</script>
... wenn dieser doch in einem
<pre> Tag steht.
Bei mir wird überhaupt
nichts maskiert - logisch - wie auch mit Deinem Code
Code: Alles auswählen
<div class="container" style="padding-top: 8rem; padding-bottom: 2rem;">
<div class="inner-container" style="width: 100%;">
<!-- 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"><section class="mbr-section article content10 codeview" group="Code Triple Final Highlight">
<div>
</div><div> <!-- Syntax Highlighting -->
</div><div> <link rel="stylesheet"
</div><div> href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
</div><div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</div><div> <script>
</div><div> document.addEventListener("DOMContentLoaded", () => {
</div><div> document.querySelectorAll("pre.code-area").forEach(el => hljs.highlightElement(el));
</div><div> });
</div><div> </script>
</div><div>
</div><div> <mbr-parameters>
</div><div> <input type="range" inline title="Abstand oben" name="paddingTop" min="0" max="8" step="1" value="2">
</div><div> <input type="range" inline title="Abstand unten" name="paddingBottom" min="0" max="8" step="1" value="2">
</div><div> <input type="range" inline title="Textbreite (%)" name="innerWidth" min="50" max="100" step="5" value="80">
</div><div> </mbr-parameters>
</div><div>
</div><div> <div class="container" mbr-style="{'padding-top': paddingTop + 'rem','padding-bottom': paddingBottom + 'rem'}">
</div><div> <div class="inner-container" mbr-style="{'width': innerWidth + '%'}">
</div><div>
</div><div> <!-- HTML-Code -->
</div><div> <div class="code-box position-relative mb-4">
</div><div> <h5 class="text-light mb-2">HTML-Code</h5>
</div><div> <button class="copy-btn btn btn-sm btn-primary position-absolute top-0 end-0 m-2"
</div><div> data-target="html">Kopieren (HTML)</button>
</div><div> <pre class="code-area language-html" mbr-text>&lt;div class="demo"&gt;Hallo Welt!&lt;/div&gt;</pre>
</div><div> </div>
</div><div>
</div><div> <!-- CSS-Code -->
</div><div> <div class="code-box position-relative mb-4">
</div><div> <h5 class="text-light mb-2">CSS-Code</h5>
</div><div> <button class="copy-btn btn btn-sm btn-success position-absolute top-0 end-0 m-2"
</div><div> data-target="css">Kopieren (CSS)</button>
</div><div> <pre class="code-area language-css" mbr-text>.demo {
</div><div> background: orange;
</div><div> padding: 20px;
</div><div> border-radius: 6px;
</div><div> color: white;
</div><div>}</pre>
</div><div> </div>
</div><div>
</div><div> <!-- JS-Code -->
</div><div> <div class="code-box position-relative">
</div><div> <h5 class="text-light mb-2">JavaScript-Code</h5>
</div><div> <button class="copy-btn btn btn-sm btn-warning position-absolute top-0 end-0 m-2"
</div><div> data-target="js">Kopieren (JS)</button>
</div><div> <pre class="code-area language-javascript" mbr-text>document.addEventListener("DOMContentLoaded", () =&gt; {
</div><div> console.log("JS läuft!");
</div><div>});</pre>
</div><div> </div>
</div><div>
</div><div> </div>
</div><div> </div>
</div><div>
</div><div> <!-- Kopier-Skript (unverändert, funktioniert für alle Buttons) -->
</div><div> <script>
</div><div> (function(){
</div><div> function copyText(txt){
</div><div> if (navigator.clipboard && navigator.clipboard.writeText) {
</div><div> return navigator.clipboard.writeText(txt).catch(()=>fallback(txt));
</div><div> }
</div><div> return fallback(txt);
</div><div> }
</div><div> function fallback(txt){
</div><div> const ta=document.createElement("textarea");
</div><div> ta.value=txt;
</div><div> ta.style.position="fixed";ta.style.opacity="0";
</div><div> document.body.appendChild(ta);ta.select();
</div><div> try{document.execCommand("copy");}catch(e){}
</div><div> document.body.removeChild(ta);
</div><div> return Promise.resolve();
</div><div> }
</div><div>
</div><div> document.addEventListener("click",e=>{
</div><div> const btn=e.target.closest(".copy-btn");
</div><div> if(!btn)return;
</div><div> const block=btn.closest(".code-box");
</div><div> if(!block)return;
</div><div> const pre=block.querySelector("pre.code-area");
</div><div> const code=pre.textContent.trim();
</div><div> copyText(code).then(()=>{
</div><div> const old=btn.textContent;
</div><div> btn.textContent="Kopiert!";
</div><div> btn.classList.add("btn-dark");
</div><div> setTimeout(()=>{
</div><div> btn.textContent=old;
</div><div> btn.classList.remove("btn-dark");
</div><div> },1200);
</div><div> });
</div><div> });
</div><div> })();
</div><div> </script>
</div><div>
</div><div></section>
</div><div><br></div></pre>
</div>
Wenn ich den kopierten Quellcode Deiner Seite in den bei mir eingebauten Kopierblock oder eben auch meinen Quellcode von diesem Block dort einbaue, dann wird der im Kopierblock falsch dargestellt. Zum Beispiel werden die Regler nicht als Code dargestellt, sondern als bedienbare Regler (siehe Screenshot unten).
Egal - wenn es bei Dir klappt ist es ja gut.
Vielleicht liegt der Fehler auch bei mir, ich hatte jetzt keine Lust danach wieder stundenlang zu suchen. Du solltest aber dennoch den Code korrekt einrücken, sonst weiß echt niemand wie man das bedienen muss.
Ich habe das gestern wieder gelöscht, weil ich ja meinen eigenen Kopierblock habe.
Vielleicht liegt es auch an meinem Umbau und ich habe einen Fehler gemacht
Dein Block war so für mich nicht brauchbar, da er nicht zentrierbar ist und Du alle Mobirise-Parameter gelöscht hast, die ich benötige. Dafür hattest Du einen überflüssigen Parameter für die Breiten-Regelung hinzugefügt, den es ja in Mobirise bereits gab:
Code: Alles auswählen
<input type="range" name="textWidth" title="Width" min="4" max="12" value="10" step="1">
Dann habe ich in Deinen (doppelten) Code zwar drinnen gelassen aber an die richtige Stelle zu den Block-Parametern gepackt und mit Header-Tag optisch getrennt:
Code: Alles auswählen
<header>Breite Code Bereich</header>
<input type="range" inline="" title="Textbreite (%)" name="innerWidth" min="50" max="100" step="5" value="100">
Weiterhin kann bei dem wirklich grausam formatierten und falsch eingerücktem Code keiner erkennen, wo man den darzustellenden Code tatsächlich einfügen soll
Das habe ich unten nun besonders eingerückt und auch kommentiert, sodass man das jetzt überhaupt erst einmal erkennen kann.
Ich meine - wie kannst Du erwarten, dass Benutzer Deiner Vorlage hier wissen wo sie den HTML-Code zur Anzeige im Kopierblock nun überhaupt einsetzen müssen - wenn Du schon
selbst dort maskierten Code einbauen musst, dann kann doch etwas nicht stimmen. Der hat in einem <pre> Tag nichts zu suchen:
Code: Alles auswählen
<pre class="code-area language-html" mbr-text><div class="demo">Hallo Welt!</div></pre>
Hier mein richtig eingerückter und modifizierter
HTML-Code:
Code: Alles auswählen
<section data-bs-version="5.1" class="mbr-section article codeview content5" group="Content">
<mbr-parameters>
<header>Size</header>
<input type="checkbox" title="Full Width" name="fullWidth">
<input type="range" inline="" title="Top" name="paddingTop" min="0" max="10" step="1" value="5">
<input type="range" inline="" title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="5">
<input type="range" name="textWidth" title="Width" min="4" max="12" value="10" step="1">
<header>Show/Hide</header>
<input type="checkbox" title="Title" name="showTitle">
<input type="checkbox" title="Subtitle" name="showSubtitle" checked="">
<header>Background</header>
<input type="color" title="Color" name="bgColor" value="#4479d9">
<header>Breite Code Bereich</header>
<input type="range" inline="" title="Textbreite (%)" name="innerWidth" min="50" max="100" step="5" value="100">
</mbr-parameters>
<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
<div class="row justify-content-center">
<div class="col-md-12 col-lg-{{textWidth}}">
<h3 class="mbr-section-title mbr-fonts-style mb-4" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-2">
<b>Code kopieren</b>
</h3>
<h4 class="mbr-section-subtitle mbr-fonts-style mb-4" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-5">
Code kopieren
</h4>
<!-- 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>
<!-- Start Copy Script -->
<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="">
<!-- Start paste -->
Hallo Welt!
<!-- End paste -->
</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="">
<!-- Start paste -->
.demo {
background: orange;
padding: 20px;
border-radius: 6px;
color: white;
}
<!-- End paste -->
</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="">
<!-- Start paste -->
JS läuft!
<!-- End paste -->
</pre>
</div>
</div>
</div>
<!-- End Copy Script -->
</div>
</div>
</div>
</section>
Hier die
CSS inklusive der originalen CSS von Mobirise:
Code: Alles auswählen
padding-top: (@paddingTop * 1rem);
padding-bottom: (@paddingBottom * 1rem);
background-color: @bgColor;
section.codeview .copy-btn:active {
transform: translateY(1px);
}
section.codeview h5 {
color: #ccc;
font-weight: 600;
}
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;
}
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;
}
}
.mbr-section-subtitle {
color: #ffffff;
}
Wenn ich also dann den HTML-Code (oben) bei mir in den Kopierblock einbaue, sieht das so aus:
