Syntax Highlighter 4 Page Builder for Magento 2

Syntax Highlighter 4 Page Builder Extension for Magento 2
Hyvä Compatible Themes Out-of-the-box
Mage-OS Compatible
Composer Installation Composer Installation?

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

See All Highlights


Magento Marketplace Approved by
  • 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


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.


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


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!


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

To Meet Your Preferences

Color Icons
For CSS Colors

& Animated CSS Values


For Structured Code

Braces Matching
On Hover

& via Rainbow Braces

Invisible Characters

Spaces & Tabs

Hyvä Theme Compatible
See Hyvä Demo
Mage-OS Compatible
See Mage-OS Demo


Syntax Highlighter 4 Page Builder For Magento 2 by JaJuMa In Detail.

Enhanced Readability, Error Detection, Comprehension & Coding Efficiency

JaJuMa Syntax Highlighter 4 Page Builder Extension

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.

  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.

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

Your Rating:

You submitted your review for moderation.

Frequently Asked Questions

General Magento Extension Questions
How to install Magento 2 extensions from JaJuMa?

We offer different ways of Magento 2 extension installation:

Before Installing

  • We recommend you to duplicate your live store on a staging/test site and try installation on your staging/test site before deploying to your live store
  • Backup Magento files and the store database

Please Note:
It’s very important to backup all themes and extensions in Magento before installation, especially when you are working on a live server. We strongly recommend you to do not skip this step.

Manual Extension Installation via FTP/SSH:

After purchasing an extension, you can download the module as .zip package in your Customer Account.
After downloading the .zip package, please follow these steps for installation:

  1. Log into your hosting space via a FTP client (e. g. FileZilla, WinSCP, cuteFtp)
  2. Create Folder: /app/code/Jajuma/[ExtensionName]*
  3. Unzip extension package and upload files into: /app/code/Jajuma/[ExtensionName]*
  4. Enter and run the following commands at the command line:
    php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy

* Note: [ExtensionName] can be found in registration.php file: Jajuma_[ExtensionName]


Extension Installation via Composer / Magento Marketplace:

For installation via composer, please get the extension

  • from Github and install as any other extension from Github or
  • from Magento Marketplace and follow this Installation Guide and
    make sure to use the correct key for Marketplace repo (the key that belongs to the account that purchased the module).
    In case of issue with installing via composer, please double-check to use the correct key for Marketplace repo.
    Your key should be in your auth.json file.

Links for composer installation to Github/Marketplace can be found on top of this page in technical info section - Click Here

Error Could not find a matching version of package jajuma/[module-name]. Check the package spelling, your version constraint and that the package

With this error message, most likely the key used for the Marketplace repo is wrong/invalid, i. e. not the key that belongs to the account that purchased the module. Please double-check to use the correct key for the Marketplace repo.

For installing extensions from Magento Marketplace, please follow this guide and make sure to use the correct key for the Marketplace repo:
Installation Guide

Please feel free to get in touch with our support in case you have any further questions or concerns or check with Marketplace support in case the installation issue can not be resolved.

Do you offer free technical support?

After purchasing a (non-free) extension we provide 12 month support via support ticket for free.

Do you offer customization service for your extensions?

Yes, please get in touch with our customer support so we can clarify your requirement and provide a quote.

Where can I download my extension?

You can download your extension from your customer account as soon as the payment has been processed.

Do you offer a free trial period?

Unfortunately, we can not offer a free trial period.

However, we do have demo site for all our extensions. Feel free to test all the features and see how the extensions work.

In case of any questions or concerns regarding compatibility or how some extension works our customer support is also always happy to help.

Do you offer refunds?

All our extensions are non-tangible downloadable goods. Hence we can unfortunately not issue refunds.

Refunds will NEVER be issued for services provided such as installation support, customization and software development work.


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

Our Customers Are Excited!

How do you like this extension?