README

Syntax Highlighter 4 Page Builder by JaJuMa 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

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

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

Further Info, Extension Description & Manual

• Extension Website EN
• Extension Website DE

Demos

• Syntax Highlighter Demo on Luma Theme
• Syntax Highlighter Demo on Hyvä Theme

Screenshots

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

License

The code is licensed under the MIT License (MIT)

Credits

Powered by PrismJS &
Many thanks @Oliver Geer for his amazing article on https://css-tricks.com/ that helped a lot when creating this module and
@Gordon Lesti for his work on syntax highlighting for Magento directives with PrismJS.

Other Magento 2 & Hyvä Themes Extensions by JaJuMa

• 🖼️ Performance & UX:
  Ultimate Image Optimizer for Magento 2
  AVIF & WebP Images, Lazy Loading, High-Resolution / Retina images

• 🖼️ Performance & UX:
  WebP Optimized Images for Magento 2
  The #1 WebP Images Solution for Magento 2

• 🙈 SEO:
  PRG Pattern Link Masking for Magento 2
  Link Masking for Layered Navigation

• 👮 User Experience:
  Shariff Social Share for Magento 2
  GDPR compliant and customizable Sharing Buttons

• 🎥 Content Management:
  Video Widget for Magento 2
  Embedding YouTube videos, GDPR compliant with auto preview image & fully responsive

• 🚀 Performance & UX:
  Page Preload for Magento 2
  Faster faster page transitions and subsequent page-loads by preloading / prefetching

• 📈 Marketing:
  Matomo Analytics for Magento 2
  Web Analytics - GDPR Compliant

• 🍯 Site Optimization:
  Honey Spam Anti-Spam for Magento 2
  Spam Protection - Reliable & GDPR Compliant

• 🔔 Marketing:
  Customer Registration Reminder & Cleanup for Magento 2
  Increase Your Customer Engangement & Cleanup your Customer Account Data Automatically

• 📣 UX & Marketing:
  Category Grid Callouts for Magento 2
  Enrich Your Category Grids With Eye-Catching Callouts

• 💭 UX & Marketing:
  Customer Satisfaction Feedback for Magento 2
  Collect Valuable Feedback From Your Customers & Understand How To Satisfy Your Customers

• 🎇 UX:
  Auto Select Options for Magento 2
  Automatically Select Configurable & Custom Options Based On Your Customer's Preferences

• ↔️ UX & Performance:
  Back Forward Cache - bfcache for Magento 2
  Enable bfcache for Magento 2 for improved UX & Core Web Vitals

• ➗ Accounting:
  Dynamic Shipping Tax Plus for Magento 2
  Dynamic Shipping Tax Calculation incl. pro-rata/proportional tax rates

• 🔍 Search:
  MySQL Search for Magento 2
  MySQL Search for Magento 2 without Elasticsearch

• ‼️ Performance:
  Preload Critical Resources & Assets
  Resource Hints for preloading important and critical resources

• Content Management:
  git 4 Page Builder
  Manage & deploy Magento 2 Page Builder content via git

• 🚀 Performance:
  Hyvä Inline CSS
  Run Magento 2 without CSS file by inline all CSS

• ⚡ Performance:
  Smart Speculations Rules
  Instant Page Navigations With Smart Data-Driven Prerendering Via Speculations Rules API

• 👨‍💻 🆓 Content Management:
  Syntax Highlighter 4 Page Builder
  Syntax Highlighting and more for Magento 2 Page Builder

• 🚩 🆓 UI & UX:
  Awesome Hyvä for Hyvä Themes
  Font Awesome 5 & 6 Icons for your Hyvä Themes Store

• 🚩 🆓 UI & UX:
  Hyvä Flags for Hyvä Themes
  Country & Language Flag Icons for your Hyvä Themes Store

• 🙆‍♂️ 🆓 User Experience:
  Customer Navigation Manager for Magento 2
  Easily manage the links in your Customer Account

• ➗ 🆓 Accounting:
  Dynamic Shipping Tax for Magento 2
  Dynamic Shipping Tax Calculation

• ❓ 🆓 Content:
  Hyvä FAQ Widget for Hyvä Themes
  FAQ Widget for your Hyvä Themes Store

• 🧩 🆓 Admin Tools:
  Magento Power Toys
  Tools and helpers, a.k.a "Toys", for Magento Admins

Other Services by JaJuMa

• 🛍️ JaJuMa-Market: Marketplace Software
  Complete Online Marketplace Software Solution. For Professional Demands. Feature Rich. Flexibly Customizable.

• 🛒 JaJuMa-Shop
  Customized Magento Shop Solutions.

• 🚀 JaJuMa-Shop: Hyvä Magento Shop Development
  Hyvä Magento Shop Development.

• 📙 JaJuMa-Shop: Magento Handbuch in Deutsch
  Magento Handbuch in Deutsch.

• 🗂️ JaJuMa-PIM
  Product Information Management. Simple. Better.

• ➕ JaJuMa-Develop: Magento 2 Extensions
  Individual Solutions For Your Business Case.

• 🖌️ JaJuMa-Design
  Designs That Inspire.

• 👔 JaJuMa-Consult
  We Show You New Perspectives.

© JaJuMa GmbH | www.jajuma.de