# jajuma-gmbh/syntax-highlighter-4-page-builder

> JaJuMa Syntax Highlighter 4 Page Builder for Magento 2

`composer require jajuma-gmbh/syntax-highlighter-4-page-builder`

Canonical URL: https://packagento.com/jajuma-gmbh/syntax-highlighter-4-page-builder

## At a glance

- **Vendor**: jajuma-gmbh (https://packagento.com/jajuma-gmbh.md)
- **Latest version**: 1.0.4 — released 2025-01-13
- **Pricing**: Free
- **Package type**: Magento 2 module
- **Status**: active, accepting new buyers

## Installation

Packagento is licence-gated, so even free packages need a licence on a project before Composer can resolve them.

1. **Sign in or create an account** at https://packagento.com/customer/account/.

2. **Add the package to your account.** Open https://packagento.com/jajuma-gmbh/syntax-highlighter-4-page-builder and complete the free checkout. A licence is minted automatically.

3. **Create or pick a project, then activate the licence on it.**
   - Projects represent the Magento installs you deploy to. Manage them at https://packagento.com/projects/.
   - Activate the new licence on the project you'll deploy this package to. Activation is what generates the Composer credentials scoped to that project.

4. **Add the project credentials to your Magento codebase.**

   Grab the project's public + private key from https://packagento.com/projects/ (open the project, then its Credentials tab), and add them to `auth.json`:

   ```json
   {
     "http-basic": {
       "packagento.com": {
         "username": "ppk_live_...",
         "password": "psk_live_..."
       }
     }
   }
   ```

   Add the Packagento Composer repository to `composer.json`:

   ```json
   {
     "repositories": [
       { "type": "composer", "url": "https://packagento.com" }
     ]
   }
   ```

5. **Install and apply.**

   ```bash
   composer require jajuma-gmbh/syntax-highlighter-4-page-builder:*
   bin/magento setup:upgrade
   bin/magento setup:di:compile
   bin/magento cache:flush
   ```

## What it does

JaJuMa Syntax Highlighter 4 Page Builder for Magento 2

## README

<img align="right" width="35%" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/syntax-highlighter-4-page-builder-extension-for-magento-2/Syntax-Highlighter-4-Page-Builder-Module-Magento-2-large.png">  

Syntax Highlighter 4 Page Builder by [JaJuMa](https://www.jajuma.de/en) adds 
syntax highlighting as well as line numbers and color icons for HTML, CSS + Javascript code in Magento 2 Page Builder.


Compatible with

<div align="left">
    <table >
     <tr>
        <td><b>Hyvä Themes</b></td>
        <td><b>Mage-OS</b></td>
        <td><b>Magento</b></td>
     </tr>
     </tr>
       <td><a href="https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes"><img align="left" width="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-shop/magento-with-hyva/JaJuMa-Hyvanaut-small.png"></a></td>
       <td><a href="https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes"><img align="left" width="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/Mage-OS-Compatible.svg"></a></td>
       <td><a href="https://www.jajuma.de/en/jajuma-shop"><img align="left" height="60" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/magento-icon.svg"></a></td>
    </tr>
    </table>
</div>


### Features

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


> **Note**  
> <img align="right" width="80" height="80" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/git-4-page-builder-extension-for-magento-2/git-4-Page-Builder-Module-Magento-2-large.png">  
> Looking for more improvements for Magento 2 Page Builder?  
> Want to use git for managing static content in Magento 2?  
> :arrow_right: Check our [**git 4 Page Builder**](https://www.jajuma.de/en/jajuma-develop/extensions/git-4-page-builder-extension-for-magento-2) extension.

### Further Info, Extension Description & Manual

* [Extension Website EN](https://www.jajuma.de/en/jajuma-develop/extensions/syntax-highlighter-4-page-builder-extension-for-magento-2)
* [Extension Website DE](https://www.jajuma.de/de/jajuma-develop/extensions/syntax-highlighter-4-page-builder-extension-fuer-magento-2)

### Demos

* [Syntax Highlighter Demo on Luma Theme](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2)
* [Syntax Highlighter Demo on Hyvä Theme](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-magento-2-and-hyva-themes)

### Screenshots

<img width="500" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/syntax-highlighter-4-page-builder-extension-for-magento-2/syntax-highlighter-4-page-builder-magento-2-theme-selection.jpg">  
<img width="500" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/syntax-highlighter-4-page-builder-extension-for-magento-2/syntax-highlighter-4-page-builder-magento-2-dark-theme-example.jpg">
<img width="500" height="auto" src="https://www.jajuma.de/media/wysiwyg/jajuma-develop/syntax-highlighter-4-page-builder-extension-for-magento-2/syntax-highlighter-4-page-builder-magento-2-light-theme-example.jpg">

### Installation

Install via composer as any other Magento extension from github:
```
composer require jajuma/module-syntax-highlighter
```

### Using Syntax Highlighter 4 Page Builder

Go to **JaJuMa -> Syntax Highlighter -> Configuration**  
And enable & configure the extension.
Use HTML editor in Page Builder - Happy Coding!


* [See Manual for more details](https://www.jajuma.de/media/wysiwyg/jajuma-develop/syntax-highlighter-4-page-builder-extension-for-magento-2/JaJuMa_Syntax_Highlighter_Manual_v001.pdf)


### License

The code is licensed under the [MIT License (MIT)](https://github.com/JaJuMa/syntax-highlighter-4-page-builder/blob/master/LICENSE)

### Credits

Powered by [PrismJS](https://github.com/PrismJS) &  
Many thanks [@Oliver Geer](https://github.com/WebCoder49) for his amazing article on [https://css-tricks.com/](https://css-tricks.com/creating-an-editable-textarea-that-supports-syntax-highlighted-code/)
that helped a lot when creating this module and   
[@Gordon Lesti](https://github.com/GordonLesti/prism-magento-template) for his work on syntax highlighting for Magento directives with PrismJS.


### Other [Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions) & [Hyvä Themes Extensions](https://www.jajuma.de/en/jajuma-develop/hyva-extensions) by [JaJuMa](https://www.jajuma.de/)

* :framed_picture: Performance & UX:<br>[Ultimate Image Optimizer for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2)<br>
  AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images

* :framed_picture: Performance & UX:<br>[WebP Optimized Images for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/webp-optimized-images-extension-for-magento-2#portfolio-content)<br>
  The #1 WebP Images Solution for Magento 2

* :see_no_evil: SEO:<br>[PRG Pattern Link Masking for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/prg-pattern-link-masking-for-magento-2)<br>
  Link Masking for Layered Navigation

* :cop: User Experience:<br>[Shariff Social Share for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/shariff-social-share-buttons-extension-for-magento-2)<br>
  GDPR compliant and customizable Sharing Buttons

_(README truncated for .md surface. Full README on https://packagento.com/jajuma-gmbh/syntax-highlighter-4-page-builder.)_

## Recent Versions

| Version | Released |
|---|---|
| 1.0.4 | 2025-01-13 |
| 1.0.3 | 2024-02-06 |
| 1.0.2 | 2024-01-24 |
| 1.0.1 | 2023-07-17 |
| 1.0.0 | 2023-05-30 |

## Quality

Latest release (1.0.4) fails the Packagento QA pipeline. Verdicts below are per-cell (Magento line × PHP version) for the matrixed tools, and run-once for the static / security tiers.


### Compatibility

Each Magento line is installed on its supported PHP versions, then the module is built (DI compile + static-content deploy). Cells show passed / failed / untested; staircase gaps render as `–`.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | Pass | Pass | – | – |
| 2.4.8 | – | Pass | Pass | – |
| 2.4.9 | – | – | Pass | Pass |


### Code Quality

Advisory checks against the module's source. Never affect the Compatibility verdict — a phpcs finding can't make a module incompatible.

#### Static Analysis

Coding standards (phpcs), mess detection (phpmd), copy-pasted code (cpd), PHP cross-version compatibility, composer.json validity. Each runs once for the whole module.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| PHPCS | Fail | 30 | 16 errors, 14 warnings (ruleset: Magento2) — 7 auto-fixable with phpcbf |
| PHPMD | Pass | 0 |  |
| Cpd | Pass | 0 |  |
| Composer validate | Info | 1 | valid; 1 advisory note (composer validate --strict) |

#### PHPStan

Type-checks the module against a real Magento install. Re-runs per Magento + PHP version because resolvable symbols differ between releases.

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | 5 | 5 | – | – |
| 2.4.8 | – | 5 | 5 | – |
| 2.4.9 | – | – | 5 | 5 |


### Tests

Unit and integration suites run per Magento + PHP cell. Test failures speak to the module's behaviour, not its compatibility with a line, so they're reported here separately.

#### Unit Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |

#### Integration Tests

| Magento | PHP 8.2 | PHP 8.3 | PHP 8.4 | PHP 8.5 |
|---|---|---|---|---|
| 2.4.7 | N/A | N/A | – | – |
| 2.4.8 | – | N/A | N/A | – |
| 2.4.9 | – | – | N/A | N/A |


### Security

Dependency-advisory audit (composer audit) plus a source malware scan. A malware detection fails the version outright.

| Tool | Status | Findings | Summary |
|---|---|---|---|
| Composer audit | Pass | 0 |  |
| Malware scan | Pass | 0 |  |

## Licence and pricing

Free. A licence is still minted on checkout and bound to your project for Composer access — no payment step.

Refundable within 14 days of first purchase via https://packagento.com/account/refunds/.

## Install via Claude Code or any MCP client

The Packagento MCP server can run the licence + project + Composer steps above in one tool call:

```
purchase_and_install_packages(
  composer_names=["jajuma-gmbh/syntax-highlighter-4-page-builder"],
  project_id="proj_xxx"
)
```

This handles cart, checkout, licence minting, project activation, and writes auth.json credentials. Connect a client with `claude mcp add packagento https://mcp.packagento.com`. Full setup at https://packagento.com/docs/mcp-setup.

## Vendor

jajuma-gmbh is a Magento 2 vendor on Packagento. See https://packagento.com/jajuma-gmbh.md for their full catalogue.