WebberZone Code Block Highlighting
WebberZone Code Block Highlighting is the easiest way to add syntax highlighting to your WordPress site. It extends the native Gutenberg core/code block with Prism.js highlighting in the browser, or optional server-side highlighting with highlight.php — no shortcodes, no block replacement, no risk o
WebberZone Code Block Highlighting is the easiest way to add syntax highlighting to your WordPress site. It extends the native Gutenberg core/code block with Prism.js highlighting in the browser, or optional server-side highlighting with highlight.php — no shortcodes, no block replacement, no risk of breaking existing posts.
Simply activate the plugin and your code blocks will instantly display beautiful, readable syntax highlighting on the frontend. Choose from 40+ programming languages and 21 colour themes, all controlled from the block editor’s Inspector Controls sidebar.
Two highlighting modes
Pick the rendering mode that best fits your site from the settings page:
- Client-side (default) — Prism.js highlights your code in the browser. Best for interactive features such as copy-to-clipboard and expand/collapse.
- Server-side (highlight.php) — Code is pre-highlighted on the server with highlight.php , so no Prism.js or any other JavaScript is loaded for highlighting. Ideal for performance, Core Web Vitals, AMP-style setups, and strict content-security policies.
Both modes use the same 21 Prism themes and produce visually identical output, so you can switch between client-side and server-side rendering at any time without changing how your code blocks look.
Why use this plugin?
- Safe by design — Works as a filter on top of core/code and saves blocks with core’s own markup. Existing posts are never invalidated. Deactivate the plugin and your blocks are still valid standard WordPress code blocks.
- Zero configuration — Activate and start writing. No setup wizard, no shortcodes.
- No highlighting JavaScript in server mode — Server-side mode pre-renders syntax colours on the server. No Prism.js or any other JavaScript is enqueued for highlighting.
- Smart asset loading — Theme CSS (and, in client mode, Prism JS) only load on pages that actually contain code blocks. Pages without code stay fast.
- Per-block controls — Set language, theme, line numbers, word wrap, title, highlighted lines, and max height individually for each block.