Syntax Copy und Highlighting

Tutorial

Vielen Dank an Volker Niederastroth für dieses Skript, das mit der Hilfe von verschiedener künstlicher Intelligenz entstanden ist. Ich habe HTML und CSS in meinem Code angepasst bzw. in Teilen entfernt und die Anwendung benutzerfreundlicher gestaltet. Wundert euch also nicht, wenn meine Anweisungen vom Original abweichen.

Diese Anwendung ermöglicht das komfortable Kopieren verschiedener Syntaxarten, etwa HTML-, PHP-, CSS- oder JavaScript‑Code.

Zieht dafür am besten einen einfachen Textblock aus der Rubrik "Article" in euer Projekt auf. Ich verwende hierfür einen Block aus dem Standard‑Theme "Mobirise 5".

Löscht bzw. ersetzt im "Code Editor" alles im Bereich "HTML Editor" und fügt dafür den Kopiercode vom Button unten ein:

HTML-Code

Wie im Screenshot unten zu sehen ist, könnt ihr jeden Codebereich ein- oder ausblenden.

Als nächstes kopiert ihr den Code für den Bereich der Seiteneinstellungen "Inside <head> code:" und fügt diesen auch dort ein:

> Menü > Seiten > Zahnrad ⚙️ (Seiteneinstellungen) > Bereich "Inside <head> code:"

Das sind die Verweise zu dem Syntax-Highlighting, um den Code ansprechender und besser lesbar zu gestalten. Dazu gibt es etliche Themen, die ihr hier ansehen könnt: highlightjs.org

Für ein anderes Thema schreibt ihr lediglich eine andere CSS- und JS-Dateien hinten an den Code vom CSS-Verweis.

Also zum Beispiel anstelle von dem jetzt dunklen Thema:

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

dann ein helles Thema wie:

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

Daher benötigt ihr keinerlei zusätzliche CSS. Bitte seht die Beispiele mit anderen Themen unten.

Fehlt nur noch das JavaScript zur Steuerung des Kopiervorgangs, das ihr, wie dort beschrieben, in den Seiteneinstellungen in den Bereich "End of <body> code:" einfügt:

> Menü > Seiten > Zahnrad ⚙️ (Seiteneinstellungen) > Bereich "End of <body> code:"

Benötigt ihr einen oder mehrere Bereiche nicht, dann löscht einfach das entsprechend markierte Element im "Code Editor", wie zum Beispiel hier den PHP-Code oder auch den CSS-Code:

 <div class="code-box position-relative mb-4" mbr-if="showCSS"> Inhalt dieses Bereiches / Content of this area </div>

Ihr könnt selbstverständlich auch weitere Bereiche hinzufügen: Kopiert dazu im "Code Editor" einen vorhandenen Bereich und fügt ihn darunter erneut ein. Zur Veranschaulichung habe ich hier PHP-Code und CSS-Code eingefügt, der für diese Anwendung allerdings nicht benötigt wird. Passt die Beschriftungen an eure Bedürfnisse an.

Wie ihr im Code sehen könnt, habe ich bei den Block-Parametern zusätzliche Eingabefelder (input) hinzugefügt, damit euch in der Toolbox des Blocks entsprechende Schalter zum Ein- und Ausschalten der Kopierbereiche zur Verfügung stehen. Diese Schalter könnt ihr selbstverständlich nach Wunsch anpassen. Der jeweilige Name des Schalters (z. B. name="showCSS") muss dann auch wieder dem entsprechenden <div> des Kopierbereichs zugewiesen werden, in diesem Beispiel entsprechend:

mbr-if="showCSS"

Die Anwendung des fertig erstellten Blocks ist denkbar einfach. Markiert mit der Maus den vorhandenen Platzhaltertext im passenden Bereich der Arbeitsseite von Mobirise und ersetzt ihn durch euren Code. Die Maskierung von HTML-Tags, also das Ersetzen von zum Beispiel spitzen Klammern durch HTML-Ersatzzeichen, erfolgt automatisch durch Mobirise.

HTML-Code - Im "Code Editor" im Bereich "HTML Editor" alles löschen und diesen Code dafür einfügen.

<section data-bs-version="5.1" class="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 Titles</header>
        <input type="checkbox" title="Title" name="showTitle">
        <input type="checkbox" title="Subtitle" name="showSubtitle">
        <header>Show/Hide Codes</header>
        <input type="checkbox" title="HTML-Code" name="showHTML" checked>
        <input type="checkbox" title="PHP-Code" name="showPHP" checked>
        <input type="checkbox" title="CSS-Code" name="showCSS" checked>
        <input type="checkbox" title="Head-Code" name="showHead" checked>
        <input type="checkbox" title="JavaScript-Code" name="showJS" checked>        
        <header>Background</header>
        <input type="color" title="Color" name="bgColor" value="#4479d9">
    </mbr-parameters>

    <!-- Start Code Copy -->   
    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row justify-content-center">
            <div class="col-md-12 col-lg-{{textWidth}}">

                <!-- Block Titles -->
                <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>Copy Code</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">
                    Copy Code</h4>
                            
                <!-- HTML-Code -->
                <div class="code-box position-relative mb-4" mbr-if="showHTML">
                    
                    <h5 class="text-light mb-2">HTML-Code - <span style="font-size: .9rem; color: #bbbbbb;">Im "Code Editor" im Bereich "HTML Editor" alles löschen und diesen Code dafür einfügen.</span></h5>
                    <button class="copy-btn btn btn-sm btn-primary mt-2 mb-4 ms-n3 ms-md-0" data-target="html">
                        Kopieren (HTML)
                    </button>
                    
                    <pre class="code-area language-html" mbr-text=""> 
<!-- Start paste -->
HTML Code hier einfügen / Paste HTML Code here
<!-- End   paste -->
                    </pre>
                    
                </div>
                    
                <!-- PHP-Code -->
                <div class="code-box position-relative mb-4" mbr-if="showPHP">
                    
                    <h5 class="text-light mb-2">PHP-Code - <span style="font-size: .9rem; color: #bbbbbb;">Kann im "HTML-Editor" in verschiedenen Bereichen angewendet werden. Bitte entsprechend den Anweisungen anpassen.</span></h5>
                    <button class="copy-btn btn btn-sm btn-info mt-2 mb-4 ms-n3 ms-md-0" data-target="html">
                        Kopieren (PHP)
                    </button>
                    
                    <pre class="code-area language-php" mbr-text="">
<!-- Start paste -->
PHP Code hier einfügen / Paste PHP Code here
<!-- End   paste -->
                    </pre>
                    
                </div>
                    
                <!-- CSS-Code -->
                <div class="code-box position-relative mb-4" mbr-if="showCSS">
                    
                    <h5 class="text-light mb-2">CSS-Code - <span style="font-size: .9rem; color: #bbbbbb;">Kann im "CSS Editor" vom Textblock angewendet werden wenn Anweisungen vorhanden.</span></h5>
                    <button class="copy-btn btn btn-sm btn-success mt-2 mb-4 ms-n3 ms-md-0" data-target="css">
                        Kopieren (CSS)
                    </button>
                    
                    <pre class="code-area language-css" mbr-text="">
<!-- Start paste -->
CSS Code hier einfügen / Paste CSS Code here
<!-- End   paste -->
                    </pre>
                    
                </div>
                    
                <!-- Head-Code -->
                <div class="code-box position-relative mb-4" mbr-if="showHead">
                    
                    <h5 class="text-light mb-2">Head-Code - <span style="font-size: .9rem; color: #bbbbbb;">In den Seiteneinstellungen im Bereich "Inside &lt;head&gt; code:" einfügen.</span></h5>
                    <button class="copy-btn btn btn-sm btn-success mt-2 mb-4 ms-n3 ms-md-0" data-target="head">
                        Kopieren (Head)
                    </button>
                    
                    <pre class="code-area language-html" mbr-text="">
<!-- Start paste -->
Head Code hier einfügen / Paste head code here
<!-- End   paste -->
                    </pre>
                    
                </div>
                    
                <!-- JS-Code -->
                <div class="code-box position-relative mb-4" mbr-if="showJS">
                    
                    <h5 class="text-light mb-2">JavaScript-Code - <span style="font-size: .9rem; color: #bbbbbb;">In den Seiteneinstellungen im Bereich "End of &lt;body&gt; code:" einfügen.</span></h5>
                    <button class="copy-btn btn btn-sm btn-warning mt-2 mb-4 ms-n3 ms-md-0" data-target="js">
                        Kopieren (JS)
                    </button>
                    
                    <pre class="code-area language-javascript" mbr-text=""> 
<!-- Start paste -->                            
JavaScript Code hier einfügen / Paste JavaScript Code here
<!-- End   paste -->
                    </pre>
                    
                </div>
                
            </div>
        </div>
    </div>
    
    <!-- End Code Copy -->
    
</section>

PHP-Code-Beispiel - Kann im "HTML Editor" in verschiedenen Bereichen angewendet werden. Bitte entsprechend den Anweisungen anpassen.

<?php
 echo "Hallo Welt! Das ist nur ein Beispiel / This is just an example.";
?>

CSS-Code-Beispiel - Kann im "CSS Editor" vom Textblock angewendet werden wenn Anweisungen vorhanden.

<!-- Start paste -->
CSS Code hier einfügen / Paste CSS Code here
<!-- End   paste -->

Head-Code - In den Seiteneinstellungen im Bereich "Inside <head> code:" einfügen.

<!-- Syntax Highlighting -->
<!-- Themes wechseln. Nur die CSS-Datei tauschen
  -- z.B.: github.min.css, vs2015.min.css, monokai.min.css, solarized-dark.min.css - sonst nichts ändern
  -- Link zu allen Themen: https://highlightjs.org/examples  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- Syntax-Highlighting anwenden -->
<script>
  document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll("pre.code-area").forEach(el => hljs.highlightElement(el));
  });
</script>

JavaScript-Code - In den Seiteneinstellungen im Bereich "End of <body> code:" einfügen.

<!-- Kopier-Skript (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>

Mobirise Tutorials

Syntax Copy & Highlighting