WebberZone Code Block Highlighting

Requires: 6.6

Tested up to: 7.0

Requires PHP: 7.4

License: GPL-2.0+

Plugin page: WebberZone Code Block Highlighting | WordPress.org listing

Syntax highlighting for the Gutenberg Code block — Prism.js, 21 themes, 40+ languages, plus an optional no-JavaScript server-side mode.

Description

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 — 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 (no JavaScript) — Code is pre-highlighted on the server with highlight.php, so no JavaScript is loaded on the frontend. 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. 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.
• JavaScript-free option — Server-side highlighting renders syntax colours without loading any frontend JavaScript, keeping your pages lean and fast.
• 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.
• Developer-friendly — Filters to add languages, override themes, and force asset loading.

Supported languages

40 languages out of the box: Apache Config, Bash, C, C++, C#, CSS, Dart, Docker, F#, Go, GraphQL, Groovy, Haskell, HTML, Java, JavaScript, JSON, JSX, Kotlin, Lua, Markdown, Nginx, Objective-C, Perl, PHP, PowerShell, Python, R, Ruby, Rust, Sass, Scala, SQL, Swift, TOML, TSX, TypeScript, Vim, XML, and YAML. Use the wzcbh_languages filter to add or remove entries from the language picker.

Included themes (21)

A11y Dark, Coldark Cold (Light), Coldark Dark, Dracula, Duotone Dark, Duotone Light, GitHub (Light), Gruvbox Dark, Gruvbox Light, Lucario, Material Dark, Material Light, Night Owl, Nord, One Dark, One Light, Shades of Purple, Solarized Dark, Synthwave '84, VS Code Dark+, Xonokai (Monokai).

Per-block features

• Language selector — Choose the programming language from the sidebar; applies the correct Prism grammar automatically.
• Line numbers — Toggle line numbers per block, with a configurable start line.
• File title / label — Add an optional filename or label displayed in the code block toolbar.
• Highlight lines — Specify lines or ranges (e.g. 1,3-5) to visually highlight using the Prism line-highlight plugin.
• Max height with expand/collapse — Set a maximum height in pixels; an expand/collapse toolbar button appears automatically.
• Word wrap — Toggle soft word wrapping per block.

Global settings

• Highlighting mode — client-side (Prism.js) or server-side (highlight.php, no JavaScript)
• Default colour scheme (theme)
• Default language
• Default line numbers toggle and start value
• Default word wrap
• Copy-to-clipboard button
• Show language label in toolbar
• Font size

Developer filters

• wzcbh_languages — Filter the language list array (slug => label)
• wzcbh_color_scheme_css_url — Override the Prism theme CSS URL
• wzcbh_force_load_assets — Force Prism assets to load on every page

GDPR

WebberZone Code Block Highlighting does not collect personal data, set cookies, or communicate with any external services.

Screenshots

More screenshots are available on the WordPress plugin page.

Installation

WordPress admin (recommended)

1. Go to Plugins > Add New in your WordPress admin.
2. Search for WebberZone Code Block Highlighting.
3. Click Install Now, then Activate.

Manual installation

1. Download the plugin zip file.
2. Extract it to your wp-content/plugins/ directory. You should end up with a webberzone-code-block-highlighting/ folder.
3. Go to Plugins in your WordPress admin and activate WebberZone Code Block Highlighting.

After activation, open any post or page in the block editor, add or select a Code block, and the Code Highlighting panel will appear in the Inspector Controls sidebar.

Frequently Asked Questions

Full FAQ is available on the WordPress.org plugin page. For support, use the WordPress.org support forum.

Does this plugin replace the core Code block? No. The plugin uses JavaScript and PHP filters to extend core/code. Deactivating it leaves behind valid, standard WordPress blocks.

Which languages are supported? 40 out of the box. Use the wzcbh_languages filter to add or remove entries from the language picker — note the corresponding Prism.js grammar must also be available on the frontend.

What is the difference between client-side and server-side highlighting? Client-side mode runs Prism.js in the browser and enables interactive toolbar features (copy-to-clipboard, expand/collapse). Server-side mode pre-renders the highlighted markup with highlight.php so no JavaScript is loaded on the frontend — ideal for performance and strict content-security policies. Both modes share the same 21 themes and look identical, so you can switch freely from Settings > Code Block Highlighting.

Does Prism.js load on every page? No. Theme CSS and (in client-side mode) Prism JS are only enqueued on pages containing at least one code block. Use wzcbh_force_load_assets to override.

How do I highlight specific lines? Enter a comma-separated list of lines or ranges in the Highlight Lines field in the sidebar (e.g. 1,3-5,8).

Development

# PHP
composer install
composer test
composer phpcs
composer phpstan

# JS
npm install
npm run build          # Production build -> includes/blocks/build/
npm run build:prism    # Copy Prism themes -> includes/assets/
npm run build:assets   # Minify generated CSS/JS assets
npm run start          # Watch mode for block/editor/frontend bundles
npm run zip            # Plugin zip

Contribute

The plugin is open source and available on GitHub. Pull requests for bug fixes and new features are welcome.

Bug reports are welcomed on GitHub Issues. Please note GitHub is not a support forum — issues that are not qualified as bugs will be closed.

Security

Report security vulnerabilities through the Patchstack Vulnerability Disclosure Program. The Patchstack team will validate, triage, and handle any reported vulnerabilities.

Translations

Help translate the plugin into your language on WordPress.org. See the Translator Handbook for guidance.

Other plugins by WebberZone

• Contextual Related Posts — Display fast, intelligent related posts to keep visitors on your site longer
• Top 10 — Track daily and total visits and display popular and trending posts
• WebberZone Snippetz — Manage custom HTML, CSS and JS snippets across your site
• Knowledge Base — Create a knowledge base or FAQ section on your WordPress site
• Better Search — Contextual search results sorted by relevance
• Auto-Close — Automatically close comments, pingbacks, trackbacks and manage revisions
• Popular Authors — Display popular authors in a WordPress widget
• Followed Posts — Show related posts based on what your visitors have already read