About This Plugin
A 30-page, comprehensive User Guide (PDF) is included in the plugin Zip file.
== Description ==
MBR HTML Generator adds a clean, distraction-free HTML composing tool to WordPress. It runs in the admin under Tools → HTML Generator, and can also be embedded on any frontend page or post via the `[mbr_html_generator]` shortcode — useful for public-facing dev utility pages, internal team tools, or student exercises. The screen is split into two panels: TinyMCE on the left for visual editing, and a live source-code panel on the right that reflects every change as you make it.
The output is pretty-printed by default, syntax-highlighted, and can be copied to the clipboard with one click. A dark mode toggle flips both the chrome and the editor skin together, with the preference persisted between sessions.
This plugin bundles TinyMCE 8.5.0 (GPL community edition) locally — no external CDN, no API key, no licence prompts, and no telemetry. It is free, with no premium tier, no upsells, and no feature gating.
= Features =
* Two-panel split: TinyMCE editor on the left, live HTML output on the right
* Available as an admin Tools page **and** as a `[mbr_html_generator]` shortcode for embedding on any frontend page or post
* Tidy toggle that cleans up TinyMCE’s HTML output for more semantic markup (unwraps standalone images from paragraphs, removes redundant spans on headings, drops empty paragraphs) — on by default, toggle off for raw output
* Classify toggle that extracts inline `style` attributes into reusable, atomic CSS utility classes (e.g. `color: red; font-size: 36px` becomes `class=”c-red fs-36″` plus a single `<style>` block at the top of the output) — designed to pair with Tidy, off by default
* Collapsible Custom CSS drawer in the editor panel — write your own CSS, see it applied live in the TinyMCE preview, and get it included verbatim at the top of the generated output. When Classify is also on, your CSS and the generated atomic rules merge into the same `<style>` block with user CSS first (matching utility-class cascade semantics: base styles, then atomic utilities)
* Skeleton loading state while TinyMCE downloads, so the page feels responsive even on slow connections
* Self-hosted bundled fonts on the frontend (Geist, Fraunces, JetBrains Mono) — no Google Fonts dependency, GDPR-safe
* Pretty-printed, syntax-highlighted source view that updates in real time
* Production-grade formatting via the bundled js-beautify library
* Auto-save to localStorage with silent restore (debounced, no server round-trip)
* Multi-tab sync — edits in one tab mirror to others
* Copy-to-clipboard with toast confirmation
* Download as `.html` file (respects the Format toggle)
* Format on/off toggle (raw vs. pretty-printed)
* Line wrap toggle
* Light and dark mode, with TinyMCE skin matching the chrome
* Live character, word, and line counts
* Locally-bundled TinyMCE 8.5.0 and js-beautify — no CDN dependency, no API key
* UK English throughout, fully translatable
* No tracking, no upsells, no premium tier
= Shortcode usage =
Drop `[mbr_html_generator]` into any page, post, or builder text/shortcode block. Frontend assets (TinyMCE, js-beautify, stylesheets, fonts) only load on pages where the shortcode is present — pages without it are unaffected.
Only one instance per page is supported. A second `[mbr_html_generator]` in the same content will render a notice (visible to logged-in editors only) instead of a broken duplicate.
Screenshots
