Mobirise Tutorials

Syntax Copy & Highlighting

Tutorial

Tutorial  Syntax Copy  Translate 

Tutorial

Vielen Dank an Volker Niederastroth für dieses Skript, das mit der Hilfe von verschiedener künstlicher Intelligenz entstanden ist.

Diese Anwendung ermöglicht das komfortable Kopieren verschiedener Syntaxarten, etwa HTML-, 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 anschließend den gesamten Inhalt des Blocks - sowohl den HTML‑Bereich links als auch den CSS‑Bereich rechts.

Kopiert die unten stehenden HTML und ersetzt damit den Inhalt des Bereichs  "HTML Editor" eures "Code Editors". Kopiert danach die CSS und fügt sie in den zuvor leeren Bereich "CSS Editor" ein.


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 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-Datei 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/"color: red;">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/"color: red;">github.min.css">


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 den JavaScript-Bereich:

<!-- JS-Code -->
<div class="code-box position-relative mb-4">
   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. Passt die Beschriftungen an eure Bedürfnisse an.


Die Anwendung des fertig erstellten Blocks ist denkbar einfach. Markiert mit der Maus den vorhandenen Beispielcode 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" den Bereich "HTML Editor" vom Textblock leeren und diesen Code einfügen
<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>

                

                <!-- 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 - <span style="font-size: .9rem; color: #bbbbbb;">Im "Code Editor" den Bereich "HTML Editor" vom Textblock leeren und diesen Code 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>

                        

                        <!-- CSS-Code -->

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

                            

                            <h5 class="text-light mb-2">CSS-Code - <span style="font-size: .9rem; color: #bbbbbb;">Im "Code Editor" den Bereich "CSS Editor" vom Textblock leeren und diesen 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="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">

                            

                            <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">

                            

                            <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>

                <!-- End Copy Script -->

                

            </div>

        </div>

    </div>

</section>
CSS-Code - Im "Code Editor" den Bereich "CSS Editor" vom Textblock leeren und diesen Code einfügen
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;

}

Header-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/atom-one-dark.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>

© Copyright Mobirise-Tutorials.com

Datenschutz und Impressum

Google Translator
Accept all cookies to translate
Funktionale Cookies akzeptieren