Approved & Verified by
Magento Marketplace
 

Unencrypted.
100% Open Source
& Customizable

Coding Standards Applied.
Clean & Readable Code

Countless Satisfied Customers:
Be The Next One!

Description

Improve The HTML Editor In Magento 2 Page Builder with Syntax Highlighting & More...
with Syntax Highlighter 4 Page Builder by JaJuMa!

Make Your Code Editing Experience In Magento Page Builder
More Convenient And Fun.

The Problem
Magento Page Builder
HTML Editor
Is A Simple Text Input

Magento Page Builder was introduced in Magento Open Source with version 2.4.
It's a powerful tool for managing content and also includes a content type for adding HTML, CSS + Javascript as well as Magento Directives.
However, editing code in a simple textarea input is not convenient.
Writing and reading code, understanding the structure, spotting syntax errors is a pain in plain all black on white only text!
Read on to learn more about our Syntax Highlighter 4 Page Builder extension and how it will enhance your code writing experience in your Magento 2 Page Builder more convenient and fun...

The Solution
Syntax Highlighting
For Magento 2
Page Builder

Apply Syntax Highlighting in Page Builder in your Magento 2 store for HTML, CSS & Javascript as well as Magento Directives code with Syntax Highlighter 4 Page Builder extension for Magento 2 by JaJuMa.
Finally, Syntax Highlighting for Magento 2 Page Builder has landed!
Making writing and reading code in Page Builder HTML editor not only more easy & convenient, but also fun!
Colorful Code Syntax Highlight: Colorful Syntax highlighting, just as you are used to from your IDE (Integrated Development Environment). Several themes included to meet your personal preferences.
Color Icons: Visually see the hex colors used in your code as color icons.
And More:

  • Line numbers
  • Display Invisible Characters
  • Highlight Matching Braces On Hover / via Rainbow Braces
  • Keep Line Indents
  • Preview CSS values on hover for angles, colors, gradients, easing functions & time for durations

Well structured and easy to read code to make your coding experience more fun, convenient and efficient.

Get our Syntax Highlighter 4 Page Builder extension now and have fun writing 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 For Magento 2 by JaJuMa-Develop
Colorful Syntax Highlighting + Icons For Hex Colors + Line Numbers
+ Keep Line Indents On Input + Highlight Matching Braces + Preview CSS Values On Hover

Syntax Highlighting For
HTML/CSS/JS as well as Magento Directives Code In Page Builder
For Magento 2

41 Themes
Included

Color Icons
For Hex Colors

Line
Numbers

Braces Matching On Hover /
via Rainbow Braces

Display
Invisible Characters

Details

Syntax Highlighter 4 Page Builder for Magento 2
by JaJuMa In Detail.
Enhanced Readability, Error Detection, Comprehension & Coding Efficiency

Why Do I Need Syntax Highlighter For Page Builder For My Magento Store?

Syntax highlighting is a feature commonly found in text editors and integrated development environments (IDEs) that provides visual cues to distinguish different parts of your code. It highlights various elements such as keywords, variables, comments, and strings by applying different colors or fonts to them.

Syntax highlighting in Magento Page Builder using JaJuMa Syntax Highlighter will greatly enhance your coding experience by providing several benefits:

  1. Readability & Differentiating code from content: Syntax highlighting improves code readability by visually separating different components of your code. It helps you quickly identify the structure and organization of the code, making it easier to understand and navigate.
    Syntax highlighting helps distinguish code elements from regular content within the Page Builder interface. It visually separates code snippets or markup languages, such as HTML, CSS, or JavaScript, from the rest of the page content. This differentiation makes it easier to identify and modify code sections without accidentally modifying the content.
  2. Error detection and debugging: Syntax highlighting can assist in identifying coding errors or issues within the code snippets used in Page Builder. By applying different colors and formatting to keywords, tags, and operators, it becomes easier to spot syntax errors, missing closing tags, or incorrect code structures. This feature helps in preventing potential issues and debugging code more efficiently.
  3. Focus and attention: Syntax highlighting allows you to focus on specific parts of your code by visually differentiating them from the rest. It draws your attention to important elements, such as function names or control statements, making it easier to comprehend the code's logic and flow.
  4. Language comprehension: Syntax highlighting can be particularly helpful when working with unfamiliar programming languages or frameworks. By highlighting language-specific keywords and constructs, it assists in understanding the syntax and structure of the code.
  5. Efficient coding & and productivity: Syntax highlighting can boost your coding efficiency and productivity within Page Builder. With syntax highlighting, you can quickly locate and navigate through different sections of your code. It enables you to spot matching parentheses or brackets, balance indentation, and maintain consistent code formatting. These benefits enable you to work more efficiently and focus on the task at hand, resulting in a smoother coding experience.
  6. Visual appeal & cues for code structure: Syntax highlighting adds visual appeal to your code, making it more visually pleasing and less monotonous. This can contribute to a positive coding experience and enhance productivity.
    Code snippets within Page Builder may involve complex structures or nested elements. Syntax highlighting can visually represent the hierarchy and organization of the code, making it easier to understand the structure and relationships between different elements. It allows you to navigate and modify the code with greater precision.
 

Overall, JaJuMa Syntax Highlighter for Page Builder enhances the readability, error detection, comprehension, and efficiency of your code. It is a valuable tool that assists both novice and experienced programmers in writing, understanding, and maintaining code.

If you are using Page Builder in your Magento 2 store, this is a neat little helper you don't want to miss when creating content.

This extension provides following improvements for Magento 2 Page Builder HTML Editor:

  • Syntax highlighting for HTML, CSS & JS as well as Magento Directives (41 themes included)
  • Color icons for CSS colors (hex, rgba, hsl, web colors)
  • Automatically added line numbers
  • Highlight matching braces on hover / via rainbow colors
  • Keep line indents on input/line break
  • Show invisible characters (space, tabs, line breaks)
  • Preview CSS values on hover for angles, colors, gradients, easing functions & time for durations

Configuration Menu & Screenshots

Theme Selection

Dark Theme Example

Light Theme Example

JaJuMa Syntax Highlighter 4 Page Builder Extension - Theme Selection
JaJuMa Syntax Highlighter 4 Page Builder Extension - Dark Theme Example
JaJuMa Syntax Highlighter 4 Page Builder Extension - Light Theme Example

Manual



As easy as it can get::

  • Install Extension,
  • Select Your Favorite Theme &
  • Happy Coding!

...thats it!


Changelog

 

Version: 1.0.0

  • Initial Release

Compatibility