Mobirise-Tutorials.com

Hi Tommy,

freut mich das du es brauchen kannst

Moin,

meine "Syntax - Copy & Highlighting" Seite ist umgeszogen und hat nun auch ein Tutorial erhalten sowie einige weitere Optionen, denn es gibt ja auch noch PHP-Code und andere Bereiche zum Einbauen von Codes:

https://www.mobirise-tutorials.com/Tuto ... -Copy.html

Moin Tommy,

jetzt brauch ich deinen erweiterten Block,
ich muss auch Head Bereich usw. haben

Moin,

Ja - ich habe das übrigens gerade nochmals komplett neu gemacht und den Code neu geschrieben:

https://www.mobirise-tutorials.com/Tuto ... -Copy.html

Ich habe das gesamte CSS des Kopierblocks entfernt, weil es überflüssig war - genau deshalb gibt es ja weit mehr als 190 verschiedene CSS-Varianten für diese Anwendung:

https://highlightjs.org/examples

Auch die zusätzlichen Parameter habe ich entfernt, da sie zu Konflikten führen und auf dem Handy eine sehr unschöne, viel zu schmale Darstellung erzeugten. Ich weiß, auf dem Handy kopiert wahrscheinlich kaum jemand, aber so sah es einfach nicht gut aus.

Wie komme ich an deinen code ?

Da fehlt ja die CSS oder wie soll ich den Block nachbauen ?

Na das ist doch Deine Anwendung - da für gibt es den Button zum kopieren vom Code

CSS braucht man nicht. Die wird doch mit den Verweisen im <header> geladen.

Hier (von Dir) diese Datei:

atom-one-dark.min.css

Code: Alles auswählen

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

Hier als Beispiel ein helles Thema:

github.min.css

https://www.mobirise-tutorials.com/Temp ... orial.html

Code: Alles auswählen

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

Ja kann ich auch selber

Dachte nur warum schwer wenn ich das einfach bei dir kopiere

https://www.niederastroth.de/code2.html

Warum kopierst Du es denn nicht - dafür habe ich doch die Seite erstellt

… ich habe bisher nicht verstanden, wozu der Haufen CSS-Code bei Dir gut sein soll. Das steht doch alles in den CSS-Dateien von Highlights-Script

Die Verweise gehören auch dringend in den <head> und nicht in den Block. Ebenso gehört das JavaScript nicht in den Block sondern an das Ende vom </body> Code.

Tommy Herrmann hat geschrieben: So 19. Okt 2025, 12:48
Die Verweise gehören auch dringend in den <head> und nicht in den Block. Ebenso gehört das JavaScript nicht in den Block sondern an das Ende vom </body> Code.

Sehe ich und Chat GPT anders

Mobirise lädt alle Blöcke innerhalb des <body>.
Wenn du also dort ein

<link rel="stylesheet" ...>
<script src="..."></script>

einfügst, wird das Stylesheet trotzdem korrekt vom Browser geladen und angewendet.
Das Gleiche gilt für das Highlight.js-Skript – es wird nachträglich im DOM ausgeführt und funktioniert einwandfrei.

Wann das völlig okay ist

Wenn der Block einzeln funktioniert (z. B. dein Code-Viewer-Block mit Syntaxhighlighting).

Wenn du mehrere Mobirise-Projekte oder -Seiten hast, und nur dieser Block Highlight.js braucht.

Wenn du das Projekt später als Mobirise-Erweiterung (.mbrext) veröffentlichst – dort sollen CSS/JS-Abhängigkeiten im Block stehen.

Dann ist das sogar die empfohlene Vorgehensweise, weil Mobirise keine Head-Zugriffe beim Blockladen erlaubt.

Wann du es lieber in den globalen HEAD packst

Wenn du mehrere Blöcke oder Seiten hast, die alle Highlight.js nutzen → sonst wird das gleiche Script mehrfach geladen.

Wenn du eine eigene Website (außerhalb Mobirise) manuell pflegst → dort ist der Head-Bereich ideal, da Skripte so nur einmal geladen werden.

Dann gehören diese Zeilen z. B. in deine index.html zwischen <head> und </head>:

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ ... rk.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ ... "></script>

Empfehlung für Mobirise-Nutzung

Da du ja deine Blöcke als Mobirise-Erweiterung unter dem Namen "Volker" verwendest (wie wir in früheren Projekten gemacht haben ):

Lass es im Block drin.
Mobirise lädt es automatisch, wenn der Block auf der Seite aktiv ist.
Keine Fehler, keine Konflikte.

Fazit:

Ort Empfehlung
Im Block Perfekt für Mobirise-Blöcke oder Einzelverwendung
Im globalen <head> Besser bei vielen Seiten/Blöcken, um doppelte Ladungen zu vermeiden

Warum das im Block funktioniert

Mobirise rendert den Block vollständig im <body>-Bereich, und das Script wird direkt nach dem HTML ausgeführt.

Da das Script mit document.addEventListener("click", …) arbeitet, registriert es ein globales Klick-Event, das überall auf der Seite funktioniert.

Der Code ist selbstständig, braucht keine Abhängigkeiten und ist sicher gekapselt durch

(function(){ ... })();

(eine sogenannte IIFE – Immediately Invoked Function Expression).

Das heißt:
Der Code läuft genau einmal pro Blockeinbindung.
Kein Konflikt mit anderen Mobirise-Skripten.
Kein Problem, wenn du den Block mehrmals verwendest – der Eventlistener bleibt stabil.

Wann das sinnvoll ist

Perfekt für Mobirise-Blöcke, die:

eigene Buttons oder interaktive Elemente enthalten (z. B. „Kopieren“, Tabs, Accordion usw.)

auf mehreren Seiten unabhängig voneinander funktionieren sollen

nicht im globalen Projekt-JS landen müssen

So wie dein Code-Viewer-Block → idealer Ort ist direkt im Block.

Halte ich für falsch - wie so vieles was die KI macht. Nachfolgende JS Dateien können so solche JavaScripts aushebeln. Genau deswegen stehen ja alle JS-Dateien auch immer unten auf jeder Webseite und das eventuell auch noch in einer ganz genauen Reihenfolge.

Übrigens "warum das richtig ist" schreibt ChatGPT grundsätzlich unter jeden Beitrag - auch wenn es nie stimmt

Tommy ich lass es so, weil eben auch noch mbrext von mir kommen werden und da macht es sinn die dinge im block zu haben. Und wenn ich mit F12 den Inspector laufen lasse muss alles ok sein und das ist es

Ja klar - das kann man alles auch so machen, allerdings widerspricht es ein wenig den alt bekannten Methoden und ist daher für mich etwas befremdlich.

Denke bitte auch daran, dass das Löschen bereits vorhandener Mobirise-Variablen, wie Du es immer wieder proklamierst, zu massiven Problemen in der Projekt-Datei führen kann. Deswegen habe ich das Löschen der Mobirise-Parameter in meinem Tutorial wieder entfernt.

Ich ersetze also - im Gegenteil zu Dir - den Inhalt des Blocks und nicht den Block selbst, den man verwenden wird.

Tommy Herrmann hat geschrieben: So 19. Okt 2025, 16:30 Ich ersetze also - im Gegenteil zu Dir - den Inhalt des Blocks und nicht den Block selbst, den man verwenden wird.

Ich doch auch - nur ich ersetze eben alles

Die Parameter und Section sind doch in meinen Blöcken auch drin:

Code: Alles auswählen

<section data-bs-version="5.1" class="menu mega-menu-volker" group="Menu" plugins="DropDown, TouchSwipe" always-top global once="menu" not-draggable>


  <mbr-parameters>
    <header>Show/Hide</header>
    <input type="checkbox" title="Logo" name="showLogo" checked>
    <input type="checkbox" title="Brand Name" name="showBrand">
    <input type="checkbox" title="Menu Items" name="showItems" checked>
<input type="color" title="Mega-Menü Toggle Farbe" name="megaToggleColor" value="#ffffff">

    <header>Mega-Menü</header>
    <select title="Spaltenzahl" name="megaCols">
      <option value="1">1 Spalte</option>
      <option value="2" selected>2 Spalten</option>
      <option value="3">3 Spalten</option>
      <option value="4">4 Spalten</option>
    </select>
    
    <input type="checkbox" title="Mega-Menü immer offen (Editor)" name="megaAlwaysOpen">

    <header>Farben &amp; Schrift</header>
    <input type="checkbox" title="Sticky" name="sticky" checked>
    <input type="color" title="Hintergrundfarbe" name="menuBgColor" value="#000000">
   
    <input type="color" title="Linkfarbe" name="linkColor" value="#163300">
    <input type="color" title="Mega-Menü Linkfarbe" name="megaMenuLinkColor" value="#ffffff">
    <input type="color" title="Hamburger Farbe" name="hamburgerColor" value="#ffffff">
    <input type="range" title="Schriftgröße (rem)" name="linkSize" min="0.8" max="1.6" step="0.05" value="1.5">
    <input type="color" title="Mega-Menü Hintergrundfarbe" name="megaBgColor" value="#121212">
    <input type="range" title="Mega-Menü Überschrift Größe (rem)" name="megaHeadingSize" min="0.8" max="2.5" step="0.1" value="1.7">
    <input type="color" title="Brand Name Farbe" name="brandColor" value="#9fe870">
      
    <input type="range" title="Mega-Menü Transparenz" name="megaOpacity" min="0" max="1" step="0.05" value="0.8">
    
  </mbr-parameters>

Verstehe jetzt nicht was Du meinst

Das ist z.B. der Block Code vom Mega Menü. Ein ganz normaler M5 Mobirise Block, nur eben custom Style

Und das mit dem Kopieren mache ich ja nur weil Du mbrext verbietest hier im Forum

… Du - ich spreche jetzt von den Variablen, die Du in all Deinen Anweisungen löscht - das kann schief gehen, wie ich ja schon damals an deinem Mega-Menü bewiesen habe. Da werden Variablen von Mobirise entfernt, die nicht entfernt werden dürfen. Das meinte ich:

Tommy,

warum das bei Dir so war kann ich nicht sagen. Ich habe das Menü bei mir jetzt schon seit Wochen laufen ohne Probleme. Ich habe es von 2 auf 3 Spalten erweitert ( bald die 4. ) habe Seiten hinzugefügt, geändert usw. ohne irgend ein Problem mit Seiten, Inhalten oder Scripten gehabt zu haben. Da wir beide wohl die einzigen sind die das ausprobiert haben, werden wir den "Fehler" auch nicht finden.

Aber ich bin nach wie vor der Meinung das es nicht an fehlenden Variablen liegt und das mein Menü flexibler und einfacher ist als dein KI Modell, was immer nur 4 Spalten anzeigt und was keine echte Mobirise Erweiterung darstellt, weil eben Menüpunkte, Bilder usw. Manuell hinzugefügt werden müssen, oder Bilder per Hand auf den Server geladen werden müssen.

Außerdem sind alle meine bisherigen Blöcke genau so aufgebaut: Alles raus aus dem Block und meine Styles rein, meine CSS rein und alle Inputfelder die ich da rein haben möchte usw. Ich habe diese Blöcke zig mal getestet mit M4, M5.

Ist dir eigentlich bekannt das Mobirise seit Version 6 seine Syntax geändert hat und vieles jetzt mit mbr-style macht ?

Und genau das versuche ich in meinen neuen Blöcken einzubauen, da muss dann die alte Syntax weichen (komplett) um Konflikte zu vermeiden.

Beispiele:

mbr-style Inline-CSS aus Parametern mbr-style="{'color': textColor}"
mbr-class Dynamische Klassen mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}"
mbr-if Bedingte Anzeige mbr-if="showButton"
mbr-text Textfeld editierbar <p mbr-text>…</p>
mbr-buttons Aktiviert Mobirise-Button-Editor <div mbr-buttons=""></div>
mbr-theme-style Verknüpfung mit Theme-Schriftstilen (display-4, display-5, …) mbr-theme-style="display-7"

Bereich Mobirise 5 Mobirise 6
Dynamische Werte Klassen + CSS Inline-Styles über mbr-style
Bedingte Anzeige JavaScript mbr-if direkt im Block
Variablenbindung Kein Support {{variable}} überall erlaubt
Responsivität Bootstrap 4 Bootstrap 5 + CSS Grid
Zahnradsteuerung <mbr-parameters> existierte, aber rudimentär Vollständig dynamisch, reagiert sofort
Buttons mbr-buttons war optional mbr-buttons wird empfohlen, um Editor-Funktion zu aktivieren

Mobirise 5:
<section class="content4" style="background-color:#ffffff;">
<div class="container">
<h3 class="mbr-section-title mbr-fonts-style display-5">Titel</h3>
</div>
</section>

Mobirise 6:
<section data-bs-version="5.1" class="content4">
<mbr-parameters>
<input type="color" name="bgColor" title="Hintergrundfarbe" value="#ffffff">
<input type="range" name="paddingTop" title="Abstand oben" min="0" max="10" value="5">
</mbr-parameters>

<div class="container"
mbr-style="{'background-color': bgColor, 'padding-top': paddingTop + 'rem'}">
<h3 class="mbr-section-title mbr-fonts-style display-5" mbr-text>
Überschrift bearbeiten
</h3>
</div>
</section>

Beispiel eines neuen Blocks ohne alte Werte :

Code: Alles auswählen

<section data-bs-version="5.1" class="meinblock" group="Content">
  <mbr-parameters>
    <header>Layout</header>
    <input type="checkbox" title="Full Width" name="fullWidth">
    <input type="range" title="Padding Top (rem)" name="paddingTop" min="0" max="10" step="1" value="5">
    <input type="range" title="Padding Bottom (rem)" name="paddingBottom" min="0" max="10" step="1" value="5">
    <input type="color" title="Background" name="bgColor" value="#ffffff">
  </mbr-parameters>

  <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}"
       mbr-style="{'background-color': bgColor, 'padding-top': paddingTop + 'rem', 'padding-bottom': paddingBottom + 'rem'}">

    <div class="row justify-content-center">
      <div class="col-md-10 col-lg-8 text-center">
        <h2 class="mbr-section-title mbr-fonts-style display-5" mbr-text>
          Überschrift bearbeiten
        </h2>
        <p class="mbr-text mbr-fonts-style display-7" mbr-text>
          Hier kommt dein Text hin. Wähle diesen Absatz aus, um ihn im Editor zu ändern.
        </p>
        <div class="mbr-section-btn align-center mt-3" mbr-buttons="">
          <a class="btn btn-primary" href="#">Mehr erfahren</a>
        </div>
      </div>
    </div>
  </div>
</section>

Kleine CCS dazu:

Code: Alles auswählen

.meinblock .mbr-section-title {
  margin-bottom: 1rem;
}
.meinblock .mbr-text {
  text-align: justify;
}

Beachte das hier :

<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}"
mbr-style="{'background-color': bgColor, 'padding-top': paddingTop + 'rem', 'padding-bottom': paddingBottom + 'rem'}">

So baue ich neue Blöcke und erweitere die nach belieben oder ändere Style Anweisungen

Du, lass uns das Thema begraben – ich weiß auch nicht genau, was passiert ist.

Ich spreche nicht von meinem Mega-Menü, damit ist nie etwas passiert, sondern ausschließlich von Deinem Mega-Menü, das im oben gezeigten Video zu sehen ist.

Mir sind durch die Fehlermeldung "Variable nicht gefunden" zweimal alle Blöcke unwiederbringlich nach dem Publizieren verschwunden, was ich eigentlich im Video zeigen wollte. Außerdem fehlten unerwartet meine gesetzten Links im Mega-Menü (ebenfalls im Video zu sehen), und dann hatte ich keine Lust mehr.

Erst nach dem kompletten Löschen der Menüleiste waren dann auch die Variablen offensichtlich in der Projekt-Datei weg und alles funktionierte erst dann richtig - eben erst nach dem erneuten Einfügen dieser neuen Menüleiste. Deswegen hatte ich ursprünglich auch vorgeschlagen eine bereits vorhandene Menüleiste (wie bei mir) zunächst zu löschen und über die Funktion der Benutzerblöcke erneut einzubauen.

Ob Du glaubst, dass das damit etwas zu tun hat, spielt dabei keine Rolle, denn diese Fehlermeldung ist doch ganz eindeutig in meinem Video zu sehen, hier ein Screenshot vom Video (oben):

variable @linkColor is undefined → Deutsch → Variable @linkColor ist undefiniert

Daher verstehe ich nicht, wie Du daran zweifeln kannst. Warum das bei mir passiert ist und bei Dir nicht, kann ich nicht sagen. Ich vermute, weil Du die Menüleiste neu aufgezogen hast und meine bereits existiert hatte.

Ich gebe dir recht: Diese Fehlermeldung dürfte nicht auftreten, da die Variable gerade im CSS‑Editor gelöscht wurde und Mobirise sie deshalb nicht mehr stören sollte.

Ich teste eben viel und da passieren solche Dinge. Wenn ich diese Dinge dann nicht berichte, brauche ich auch erst gar nicht zu testen.

Ich weiß jetzt nicht was Du bezüglich der "mbr" Style-Anweisungen meinst - das war doch schon immer so - auch schon in "Mobirise 3"

Ich habe grundsätzlich ein wenig Zweifel an Deiner Methode, vorhandene Mobirise-Blöcke komplett zu leeren und ihnen anschließend einen völlig anderen Inhalt zu geben. Mal ganz abgesehen von diesem - vielleicht sogar zufälligen - Fehler mit der nicht vorhandenen Variable.

Das wollte ich hier noch einmal zur Diskussion stellen, denn ich gehe davon aus, dass Du das immer so weiter machen willst.

Ich halte das für problematisch, weil dabei oft genau die Blockwerkzeuge verloren gehen, die ich eigentlich behalten möchte und vielleicht bereits vorhandenen Einträge in der Projekt-Datei keinen Bezug mehr haben könnten. Deshalb habe ich den Block zum Kopieren von HTML-Syntax komplett neu erstellt und die überflüssigen Blockwerkzeuge wieder entfernt. Dort gab es auch ursprünglich eine class="container" innerhalb einer zweiten class="container", das ist meiner Mening nach nicht so ganz richtig und hat diese unschöne Darstellung (super breiter Rand) am Handy verursacht, die ich weiter oben beschrieben hatte. Ich glaube, das hast Du aber inzwischen auch geändert.

Das hatte ChatGPT dazu bemerkt:

ChatGPT hat geschrieben:
Was ich sehe im HTML:

> Außen: <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">

> Innen (nochmal): <div class="container">

Diese doppelte .container-Schachtel sorgt für doppeltes Seiten-Padding auf kleinen Screens. Siehe Quelltext der Seite an den Zeilen mit mbr-class ... container und der inneren div class="container".

P.S.:

Noch ein Beispiel zu den gelöschten Blockwerkzeugen von Mobirise.

Du ersetzt zum Beispiel den vorhandenen Breitenregler, der die Breite links und rechts regelt, vom Block hiermit:

Code: Alles auswählen

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

Das bewirkt, dass diese Code-Container nun immer linksbündig stehen und an einer von mir gar nicht gewollten Stelle beginnen, denn meine Blöcke auf der Seite sitzen viel weiter mittig. Der alte Regler für die Breite würde in diesem Fall also weiter benötigt, damit alles formatierbar bleibt. In meinem Fall, könnte ich diese Platzierung so nicht auf meinen Tutorialseiten gebrauchen.

Ich finde auch teilweise Deine Beispiele für Anfänger etwas verwirrend.

Zum Beispiel zeigst Du jetzt die <head> Tags </head> in Deinem Code (siehe Screenshot oben), die man nirgendwo in Mobirise jemals sehen kann:

Code: Alles auswählen

<head>
  <meta charset="UTF-8">
  <title>Meine Seite</title>
  <link rel="stylesheet" href="style.css">
</head>

Nur zur Info.

Ich hab die Anwendung zum Kopieren von Syntax nun nochmals umgeschrieben und noch alle Parameter zum ein- und ausschalten der unterschiedlichen Code-Bereiche hinzugefügt:

https://www.mobirise-tutorials.com/Tuto ... -Copy.html

Mobirise-Tutorials.com

Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen

Re: Block um Code zum Kopieren einzufügen