How do you like this extension?
Syntax Highlighter 4 Page Builder for Magento 2
Syntax Highlighting For Magento 2
Page Builder Has Landed!
Apply syntax highlighting in Page Builder in your Magento 2 store for HTML, CSS & Javascript as well as Magento Directives code.
Have More Fun Writing Code In Page Builder
In Your Magento Store:
- Syntax Highlighting For HTML/CSS/JS
as well as Magento Directives - 41 Themes Included
- Color Icons For CSS Colors
- Line Numbers
- Braces Matching
- Display Invisible Characters
License:
- One-Time Payment
- Lifetime Access To Source Code
- 1 Year Free Support
- 1 Year Free Updates
Approved & Verified by Magento Marketplace
1st Extension Provider
With Hyvä Support
Awesome since 2021!
Unencrypted. 100% Open Source & Customizable
Coding Standards Applied. Clean & Readable Code
Countless Satisfied Customers: Be The Next One!
Made With Love
Our extensions are made with love & passion for building new things, perfection & performance in mind.
Field Tested
Our extensions are field-proven in our own client projects.
Customer Feedback
We use the Ultimate Image Optimizer extension. The performance has improved considerably. The tool has been running smoothly right from the start.
We commissioned a really tricky adjustment to an extension that other agencies couldn't manage...and the guys at JaJuMa did a fantastic job! We are happy to continue working with JaJuMa.
We are very satisfied with this module. It reduces the sizes of our images and so the loading of our pages are much more faster now. We recommand this module for everybody!!!
- Syntax Highlighter 4 Page Builder Introduction
- Theme Selection
- Dark Theme Example
- Light Theme Example
Configurations & Screenshots
Solution
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
PLAIN TEXT INPUT
AS HTML EDITOR
IN MAGENTO 2
PAGE BUILDER
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!
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:
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!
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
41 Themes
Included
To Meet Your Preferences
Color Icons
For CSS Colors
& Animated CSS Values
Line
Numbers
For Structured Code
Braces Matching
On Hover
& via Rainbow Braces
Display
Invisible Characters
Spaces & Tabs
Details
Syntax Highlighter 4 Page Builder For Magento 2 by JaJuMa In Detail.
Enhanced Readability, Error Detection, Comprehension & Coding Efficiency
What Is Syntax Highlighting And Why Do I Need It 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.
- 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. - 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.
- 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.
- 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.
- 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.
- 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.
Why Do I Need Syntax Highlighter For Page Builder For My Magento Store?
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
Write Your Review
Frequently Asked Questions
Changelog
Version: 1.0.0
- Initial Release
Version: 1.0.1
- Fix conflict with Smile Elasticsuite
Version: 1.0.2
- General performance improvements when working with large html
- Added configs to enable/disable plugins to avoid performance issues with large html
- General performance improvements when working with large html
- Minor improvements
- Small bugfix by @andyeades - Thanks a lot!
Version: 1.0.3
- Fixed: Issue with resize HTML Editor
- Fixed: Issue with Magento directives highlighting
More Extensions
Maybe also interesting for you?
More valuable Extensions and Add-Ons for your Magento Store