PHPackages jajuma/module-syntax-highlighter - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. jajuma/module-syntax-highlighter ActiveMagento2-module[Utility & Helpers](/categories/utility) jajuma/module-syntax-highlighter ================================ JaJuMa Syntax Highlighter 4 Page Builder for Magento 2 1.0.4(1y ago)711.4k↓46.2%1MITCSS Since May 30Pushed 1y ago1 watchersCompare [ Source](https://github.com/JaJuMa-GmbH/syntax-highlighter-4-page-builder)[ Packagist](https://packagist.org/packages/jajuma/module-syntax-highlighter)[ RSS](/packages/jajuma-module-syntax-highlighter/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (5)DependenciesVersions (6)Used By (0) 🤓 Syntax Highlighter 4 Page Builder for Magento 2 by [JaJuMa](https://www.jajuma.de/) ===================================================================================== [](#nerd_face-syntax-highlighter-4-page-builder-for-magento-2-by-jajuma) [![](https://camo.githubusercontent.com/241f6f3b08868358d99d7cb5a961ab0a9a7c65fa92756b48abb731d9bdce93c9/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f53796e7461782d486967686c6967687465722d342d506167652d4275696c6465722d4d6f64756c652d4d6167656e746f2d322d6c617267652e706e67)](https://camo.githubusercontent.com/241f6f3b08868358d99d7cb5a961ab0a9a7c65fa92756b48abb731d9bdce93c9/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f53796e7461782d486967686c6967687465722d342d506167652d4275696c6465722d4d6f64756c652d4d6167656e746f2d322d6c617267652e706e67) 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 **Hyvä Themes** **Mage-OS** **Magento** [![](https://camo.githubusercontent.com/f60465e91b61ffa12199ca4d402503c67643e56f41a569797d5dc040188ff926/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d73686f702f6d6167656e746f2d776974682d687976612f4a614a754d612d487976616e6175742d736d616c6c2e706e67)](https://www.jajuma.de/en/jajuma-shop/online-shop-with-magento-2-and-hyva-themes) [![](https://camo.githubusercontent.com/8efe5fbcf4d529b393fe34dbdf09084cb65dde063e8d19079d6d7240ab372b57/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f4d6167652d4f532d436f6d70617469626c652e737667)](https://www.jajuma.de/en/jajuma-shop/demo-shop-with-mage-os-and-hyva-themes) [![](https://camo.githubusercontent.com/8d12277ad4c5a117ed9dea3defcd4b222481b163fc2841c7538b52254a066895/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f6d6167656e746f2d69636f6e2e737667)](https://www.jajuma.de/en/jajuma-shop) Features -------- [](#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** > [![](https://camo.githubusercontent.com/121072c3aba9ffdbe9df7f6f154e3974608c38d75d2aa7a3f25d5d79c9b6b1ba/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f6769742d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f6769742d342d506167652d4275696c6465722d4d6f64756c652d4d6167656e746f2d322d6c617267652e706e67)](https://camo.githubusercontent.com/121072c3aba9ffdbe9df7f6f154e3974608c38d75d2aa7a3f25d5d79c9b6b1ba/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f6769742d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f6769742d342d506167652d4275696c6465722d4d6f64756c652d4d6167656e746f2d322d6c617267652e706e67) > Looking for more improvements for Magento 2 Page Builder? > Want to use git for managing static content in Magento 2? > ➡️ 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 ------------------------------------------------ [](#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 ----- [](#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 ----------- [](#screenshots) [![](https://camo.githubusercontent.com/4a2e158aa68908ae51a798b50f4f2ce697acea85f9161065337bdbb8ee095d02/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d6d6167656e746f2d322d7468656d652d73656c656374696f6e2e6a7067)](https://camo.githubusercontent.com/4a2e158aa68908ae51a798b50f4f2ce697acea85f9161065337bdbb8ee095d02/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d6d6167656e746f2d322d7468656d652d73656c656374696f6e2e6a7067) [![](https://camo.githubusercontent.com/229b8db14ee64d332735bbf24bc899cf452e300de3dae352408e3500b183e509/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d6d6167656e746f2d322d6461726b2d7468656d652d6578616d706c652e6a7067)](https://camo.githubusercontent.com/229b8db14ee64d332735bbf24bc899cf452e300de3dae352408e3500b183e509/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d6d6167656e746f2d322d6461726b2d7468656d652d6578616d706c652e6a7067) [![](https://camo.githubusercontent.com/7c850193a003b5675a417a1c2cea006e52ab9a1caa937183ea76ff391cde9b2a/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d6d6167656e746f2d322d6c696768742d7468656d652d6578616d706c652e6a7067)](https://camo.githubusercontent.com/7c850193a003b5675a417a1c2cea006e52ab9a1caa937183ea76ff391cde9b2a/68747470733a2f2f7777772e6a616a756d612e64652f6d656469612f777973697779672f6a616a756d612d646576656c6f702f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d657874656e73696f6e2d666f722d6d6167656e746f2d322f73796e7461782d686967686c6967687465722d342d706167652d6275696c6465722d6d6167656e746f2d322d6c696768742d7468656d652d6578616d706c652e6a7067) Installation ------------ [](#installation) Install via composer as any other Magento extension from github: ``` composer require jajuma/module-syntax-highlighter ``` Using Syntax Highlighter 4 Page Builder --------------------------------------- [](#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 ------- [](#license) The code is licensed under the [MIT License (MIT)](https://github.com/JaJuMa/syntax-highlighter-4-page-builder/blob/master/LICENSE) Credits ------- [](#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/) --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- [](#other-magento-2--hyvä-themes-extensions-by-jajuma) - 🖼️ Performance & UX: [Ultimate Image Optimizer for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/ultimate-image-optimizer-extension-for-magento-2) AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images - 🖼️ Performance & UX: [WebP Optimized Images for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/webp-optimized-images-extension-for-magento-2#portfolio-content) The #1 WebP Images Solution for Magento 2 - 🙈 SEO: [PRG Pattern Link Masking for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/prg-pattern-link-masking-for-magento-2) Link Masking for Layered Navigation - 👮 User Experience: [Shariff Social Share for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/shariff-social-share-buttons-extension-for-magento-2) GDPR compliant and customizable Sharing Buttons - 🎥 Content Management: [Video Widget for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/video-widget-gdpr-extension-for-magento-2) Embedding YouTube videos, GDPR compliant with auto preview image & fully responsive - 🚀 Performance & UX: [Page Preload for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/page-preload-extension-for-magento-2) Faster faster page transitions and subsequent page-loads by preloading / prefetching - 📈 Marketing: [Matomo Analytics for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2) Web Analytics - GDPR Compliant - 🍯 Site Optimization: [Honey Spam Anti-Spam for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/honey-spam-anti-spam-extension-for-magento-2) Spam Protection - Reliable & GDPR Compliant - 🔔 Marketing: [Customer Registration Reminder & Cleanup for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/customer-registration-reminder-and-cleanup-extension-for-magento-2) Increase Your Customer Engangement & Cleanup your Customer Account Data Automatically - 📣 UX & Marketing: [Category Grid Callouts for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/category-grid-callouts-extension-for-magento-2) Enrich Your Category Grids With Eye-Catching Callouts - 💭 UX & Marketing: [Customer Satisfaction Feedback for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/category-grid-callouts-extension-for-magento-2) Collect Valuable Feedback From Your Customers & Understand How To Satisfy Your Customers - 🎇 UX: [Auto Select Options for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/auto-select-options-extension-for-magento-2) Automatically Select Configurable & Custom Options Based On Your Customer's Preferences - ↔️ UX & Performance: [Back Forward Cache - bfcache for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/back-forward-cache-extension-for-magento-2) Enable bfcache for Magento 2 for improved UX & Core Web Vitals - ➗ Accounting: [Dynamic Shipping Tax Plus for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/proportional-pro-rata-dynamic-shipping-tax-plus-extension-for-magento-2) Dynamic Shipping Tax Calculation incl. pro-rata/proportional tax rates - 🔍 Search: [MySQL Search for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/magento-without-elasticsearch-mysql-search-extension-for-magento-2) MySQL Search for Magento 2 without Elasticsearch - ‼️ Performance: [Preload Critical Resources & Assets](https://www.jajuma.de/en/jajuma-develop/magento-extensions/resource-hints-preload-critical-resources-assets-extension-for-magento-2) Resource Hints for preloading important and critical resources - ![:octocat:](https://github.githubassets.com/images/icons/emoji/octocat.png ":octocat:") Content Management: [git 4 Page Builder](https://www.jajuma.de/en/jajuma-develop/magento-extensions/git-4-page-builder-extension-for-magento-2) Manage & deploy Magento 2 Page Builder content via git - 🚀 Performance: [Hyvä Inline CSS](https://www.jajuma.de/en/jajuma-develop/magento-extensions/hyva-inline-css-extension-for-magento-with-hyva-themes) Run Magento 2 without CSS file by inline all CSS - ⚡ Performance: [Smart Speculations Rules](https://www.jajuma.de/en/jajuma-develop/magento-extensions/smart-speculations-rules-extension-for-magento-2) Instant Page Navigations With Smart Data-Driven Prerendering Via Speculations Rules API - 👨‍💻 🆓 Content Management: [Syntax Highlighter 4 Page Builder](https://www.jajuma.de/en/jajuma-develop/magento-extensions/syntax-highlighter-4-page-builder-extension-for-magento-2) Syntax Highlighting and more for Magento 2 Page Builder - 🚩 🆓 UI & UX: [Awesome Hyvä for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/magento-extensions/font-awesome-icons-for-hyva-themes-extension) Font Awesome 5 & 6 Icons for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store - 🚩 🆓 UI & UX: [Hyvä Flags for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/magento-extensions/country-language-flag-icons-for-hyva-themes-extension) Country & Language Flag Icons for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store - 🙆‍♂️ 🆓 User Experience: [Customer Navigation Manager for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/customer-navigation-manager-extension-for-magento-2) Easily manage the links in your Customer Account - ➗ 🆓 Accounting: [Dynamic Shipping Tax for Magento 2](https://www.jajuma.de/en/jajuma-develop/magento-extensions/dynamic-shipping-tax-extension-for-magento-2) Dynamic Shipping Tax Calculation - ❓ 🆓 Content: [Hyvä FAQ Widget for Hyvä Themes](https://www.jajuma.de/en/jajuma-develop/magento-extensions/hyva-faq-widget-extension-for-hyva-themes) FAQ Widget for your [Hyvä Themes](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Store - 🧩 🆓 Admin Tools: [Magento Power Toys](https://www.jajuma.de/en/jajuma-develop/magento-extensions/power-toys-for-magento-2) Tools and helpers, a.k.a "Toys", for Magento Admins Other [Services](https://www.jajuma.de/en/jajuma/company-magento-ecommerce-agency-stuttgart) by [JaJuMa](https://www.jajuma.de/) -------------------------------------------------------------------------------------------------------------------------------- [](#other-services-by-jajuma) - 🛍️ [JaJuMa-Market: Marketplace Software](https://www.jajuma.de/en/jajuma-market) Complete Online Marketplace Software Solution. For Professional Demands. Feature Rich. Flexibly Customizable. - 🛒 [JaJuMa-Shop](https://www.jajuma.de/en/jajuma-shop) Customized Magento Shop Solutions. - 🚀 [JaJuMa-Shop: Hyvä Magento Shop Development](https://www.jajuma.de/de/jajuma-shop/online-shop-mit-magento-2-und-hyva-themes) Hyvä Magento Shop Development. - 📙 [JaJuMa-Shop: Magento Handbuch in Deutsch](https://www.jajuma.de/de/jajuma-shop/magento-2-handbuch/) Magento Handbuch in Deutsch. - 🗂️ [JaJuMa-PIM](https://www.jajuma.de/en/jajuma-pim) Product Information Management. Simple. Better. - ➕ [JaJuMa-Develop: Magento 2 Extensions](https://www.jajuma.de/en/jajuma-develop/magento-extensions) Individual Solutions For Your Business Case. - 🖌️ [JaJuMa-Design](https://www.jajuma.de/en/jajuma-design) Designs That Inspire. - 👔 [JaJuMa-Consult](https://www.jajuma.de/en/jajuma-consult) We Show You New Perspectives. © JaJuMa GmbH | [www.jajuma.de](www.jajuma.de) ### Health Score 35 — LowBetter than 80% of packages Maintenance41 Moderate activity, may be stable Popularity31 Limited adoption so far Community10 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 87.5% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~148 days Total 5 Last Release 491d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/b6fc751e28d1a0127e73bcde1ffaedbd9d73aef59fd18ed71984f516fcf8dab1?d=identicon)[jajuma](/maintainers/jajuma) --- Top Contributors [![JaJuMa](https://avatars.githubusercontent.com/u/12202801?v=4)](https://github.com/JaJuMa "JaJuMa (7 commits)")[![andyeades](https://avatars.githubusercontent.com/u/53946726?v=4)](https://github.com/andyeades "andyeades (1 commits)") --- Tags developer-experiencedeveloper-toolseditormage-osmage-os-extensionmagento-extensionmagento2magento2-extensionmagento2-extension-freemagento2-modulepagebuildersyntax-highlightersyntax-highlighting ### Embed Badge ![Health badge](/badges/jajuma-module-syntax-highlighter/health.svg) ``` [![Health](https://phpackages.com/badges/jajuma-module-syntax-highlighter/health.svg)](https://phpackages.com/packages/jajuma-module-syntax-highlighter) ``` ### Alternatives [heroyt/tournament-generator A set of classes used to create multiple kinds of tournament brackets in PHP. 6615.2k](/packages/heroyt-tournament-generator) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)