Approved & Verified by
Magento Marketplace
 

Unencrypted.
100% Open Source
& Customizable

Coding Standards Applied.
Clean & Readable Code

Countless Satisfied Customers:
Be The Next One!

Beschreibung

Verbessern Sie den HTML-Editor in Magento 2 Page Builder mit Syntax-Highlighting & mehr...
mit Syntax Highlighter 4 Page Builder von JaJuMa!

Mehr Komfort und Spaß beim Coding im Magento Page Builder.

Das Problem
Magento Page Builder
HTML Editor
Einfacher Texteditor

Magento Page Builder wurde in Magento Open Source mit Version 2.4 eingeführt.
Es ist ein leistungsfähiges Werkzeug für die Verwaltung von Inhalten und enthält auch einen Inhaltstyp zum Hinzufügen von HTML, CSS + Javascript sowie Magento Directives.
Allerdings ist die Bearbeitung von Code in einer einfachen Textarea-Eingabe nicht bequem.
Das Schreiben und Lesen von Code, das Verstehen der Struktur und das Erkennen von Syntaxfehlern ist in einem reinen Text, der nur schwarz auf weiß ist, eine Qual!
Lesen Sie weiter, um mehr über unsere Syntax Highlighter 4 Page Builder-Erweiterung zu erfahren und wie sie Ihre Erfahrung beim Schreiben von Code in Ihrem Magento 2 Page Builder bequemer und unterhaltsamer machen wird...

Die Lösung
Syntax Highlighting
Für Magento 2
Page Builder

Nutzen Sie Syntax-Highlighting im Page Builder in Ihrem Magento 2 Shop für HTML, CSS & Javascript sowie Magento Directives Code mit der Syntax Highlighter 4 Page Builder Extension für Magento 2 von JaJuMa.
Endlich, Syntax-Highlighting für Magento 2 Page Builder ist gelandet!
Das Schreiben und Lesen von Code im Page Builder HTML-Editor ist nicht nur einfacher und bequemer, sondern macht auch mehr Spaß!
Farbige Syntaxhervorhebung im Code: Farbige Syntaxhervorhebung, so wie Sie es von Ihrer IDE (Integrated Development Environment) gewohnt sind. Mehrere Themes enthalten, um Ihre persönlichen Vorlieben zu erfüllen.
Farbicons: Die in Ihrem Code verwendeten Hex-Farben werden als Farbsymbole angezeigt.
Und mehr:

  • Zeilennummern
  • Anzeige unsichtbarer Zeichen
  • Hervorhebung öffnender/schließender Klammern bei Hover / durch "Rainbow Braces"
  • Zeileneinzüge beibehalten bei Zeilenumbruch
  • Vorschau für CSS Werte bei hover für angles, colors, gradients, easing functions & time for durations

Gut strukturierter und leicht zu lesender Code, damit das Programmieren mehr Spaß macht, bequemer und effizienter ist.

Holen Sie sich jetzt unsere Syntax Highlighter 4 Page Builder Erweiterung und Viel Spaß beim Schreiben von Code in Page Builder!

 

Further Questions? Have a Feature-Request?
Or need some individual customization?
Lets get in touch:

Highlights

Syntax Highlighter 4 Page Builder Für Magento 2 by JaJuMa-Develop
Farbliches Syntax Highlighting + Icons Für Hex Codes + Zeilennummern
+ Zeileneinzüge bei der Eingabe beibehalten + Übereinstimmende Klammern hervorheben + Vorschau von CSS Werten Bei Hover

Syntax Highlighting Für
HTML/CSS/JS Code sowie Magento Directives Im Page Builder
Für Magento 2

41 Themes
Enthalten

Farbicons
Für Hex-Codes

Zeilen-
Nummern

Hervorhebung von Klammern Bei Hover /
via "Rainbow Braces"

Anzeige
Unsichtbarer Zeichen

Details

Syntax Highlighter 4 Page Builder für Magento 2
by JaJuMa Im Detail.
Verbesserte Lesbarkeit, Fehlererkennung, Verständlichkeit und Effizienz beim Coding

Warum brauche ich Syntax-Highlighter für Page Builder für meinen Magento-Shop?

Die Syntaxhervorhebung ist eine Funktion, die häufig in Texteditoren und integrierten Entwicklungsumgebungen (IDEs) zu finden ist und visuelle Hinweise zur Unterscheidung verschiedener Teile Ihres Codes liefert. Sie hebt verschiedene Elemente wie Schlüsselwörter, Variablen, Kommentare und Zeichenketten hervor, indem sie ihnen verschiedene Farben oder Schriftarten zuweist.

Syntax-Highlighting in Magento Page Builder mit JaJuMa Syntax Highlighter wird erheblich verbessern Sie Ihre Codierung Erfahrung durch mehrere Vorteile:

  1. Lesbarkeit und Unterscheidung von Code und Inhalt: Die Syntaxhervorhebung verbessert die Lesbarkeit des Codes, indem sie die verschiedenen Komponenten des Codes visuell trennt. Sie hilft Ihnen, die Struktur und Organisation des Codes schnell zu erkennen, wodurch er leichter zu verstehen und zu navigieren ist.
    Die Syntaxhervorhebung hilft bei der Unterscheidung von Codeelementen und regulärem Inhalt innerhalb der Page Builder-Oberfläche. Sie trennt Codeschnipsel oder Auszeichnungssprachen wie HTML, CSS oder JavaScript visuell vom übrigen Seiteninhalt. Diese Unterscheidung macht es einfacher, Codeabschnitte zu identifizieren und zu ändern, ohne versehentlich den Inhalt zu verändern.
  2. Fehlererkennung und Fehlerbehebung: Die Syntaxhervorhebung kann bei der Identifizierung von Codierungsfehlern oder Problemen innerhalb der in Page Builder verwendeten Code-Snippets helfen. Durch die Anwendung verschiedener Farben und Formatierungen auf Schlüsselwörter, Tags und Operatoren wird es einfacher, Syntaxfehler, fehlende schließende Tags oder falsche Codestrukturen zu erkennen. Diese Funktion hilft dabei, potenzielle Probleme zu vermeiden und den Code effizienter zu debuggen.
  3. Fokus und Aufmerksamkeit: Die Syntaxhervorhebung ermöglicht es Ihnen, sich auf bestimmte Teile Ihres Codes zu konzentrieren, indem Sie sie visuell vom Rest abheben. Sie lenkt Ihre Aufmerksamkeit auf wichtige Elemente wie Funktionsnamen oder Steueranweisungen und erleichtert so das Verständnis von Logik und Ablauf des Codes.
  4. Sprachverstehen: Die Syntaxhervorhebung kann besonders hilfreich sein, wenn Sie mit unbekannten Programmiersprachen oder Frameworks arbeiten. Durch die Hervorhebung sprachspezifischer Schlüsselwörter und Konstrukte wird das Verständnis der Syntax und Struktur des Codes erleichtert.
  5. Effizientes Coding & und Produktivität: Die Syntaxhervorhebung kann die Effizienz und Produktivität Ihrer Codierung in Page Builder steigern. Mit der Syntaxhervorhebung können Sie verschiedene Abschnitte Ihres Codes schnell auffinden und durch sie navigieren. So können Sie übereinstimmende Klammern erkennen, die Einrückung ausgleichen und eine konsistente Codeformatierung beibehalten. Dank dieser Vorteile können Sie effizienter arbeiten und sich auf die eigentliche Aufgabe konzentrieren, was zu einem reibungsloseren Ablauf bei der Programmierung führt.
  6. Visuelle Attraktivität und Hinweise auf die Codestruktur: Die Syntaxhervorhebung macht Ihren Code optisch ansprechender und weniger eintönig. Dies kann zu einer positiven Codierungserfahrung beitragen und die Produktivität steigern.
    Code-Snippets in Page Builder können komplexe Strukturen oder verschachtelte Elemente enthalten. Die Syntaxhervorhebung kann die Hierarchie und die Organisation des Codes visuell darstellen und erleichtert so das Verständnis der Struktur und der Beziehungen zwischen verschiedenen Elementen. So können Sie den Code mit größerer Präzision navigieren und ändern.
 

Insgesamt verbessert JaJuMa Syntax Highlighter for Page Builder die Lesbarkeit, Fehlererkennung, das Verständnis und die Effizienz Ihres Codes. Es ist ein wertvolles Werkzeug, das sowohl Anfängern als auch erfahrenen Programmierern beim Schreiben, Verstehen und Warten von Code behilflich ist.

Wenn Sie den Page Builder in Ihrem Magento 2-Shop verwenden, ist dies ein netter kleiner Helfer, den Sie beim Erstellen von Inhalten nicht missen möchten.

Diese Erweiterung bietet folgende Verbesserungen für Magento 2 Page Builder HTML Editor:

  • Syntaxhervorhebung für HTML, CSS und JS sowie Magento Directives (41 Themes enthalten)
  • Farbsymbole für CSS-Farben (hex, rgba, hsl, Webfarben)
  • Automatisch hinzugefügte Zeilennummern
  • Hervorhebung passender Klammern bei Hover / über Regenbogenfarben
  • Tabulatorzeileneinzüge bei Eingabe/Zeilenumbruch beibehalten
  • Unsichtbare Zeichen anzeigen (Leerzeichen, Tabulatoren, Zeilenumbrüche)
  • Vorschau für CSS Werte bei hover für angles, colors, gradients, easing functions & time for durations

Screenshots

Theme Auswahl

Dark Theme Beispiel

Light Theme Beispiel

JaJuMa Syntax Highlighter 4 Page Builder Extension - Theme Auswahl
JaJuMa Syntax Highlighter 4 Page Builder Extension - Dark Theme Beispiel
JaJuMa Syntax Highlighter 4 Page Builder Extension - Light Theme Beispiel

Manual



Einfacher geht's nicht:

  • Extension installieren,
  • Wählen Sie Ihr bevorzugtes Theme &
  • Happy Coding!

...das war's!


Changelog

 

Version: 1.0.0

  • Initial Release

Compatibility