Getting Started with WebberZone Code Block Highlighting

WebberZone Code Block Highlighting extends the native WordPress Gutenberg core/code block with syntax highlighting, and is available for free on WordPress.org.

WordPress install (The easy way)

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

Manual install

  1. Download the latest release from WordPress.orgOpens in a new window or from GitHub ReleasesOpens in a new window.
  2. Unzip the archive and upload the webberzone-code-block-highlighting folder to /wp-content/plugins/.
  3. Go to Plugins in your WordPress admin and activate WebberZone Code Block Highlighting.

Installing via WP CLI

wp plugin install webberzone-code-block-highlighting --activate

On a Multisite network, use --activate-network to network-activate the plugin:

wp plugin install webberzone-code-block-highlighting --activate-network

Using WebberZone Code Block Highlighting

After activation, open the block editor and add a Code block (or select an existing one). A Code Highlighting panel appears in the Inspector Controls sidebar on the right. Use that panel to choose the language, color scheme, and other display options for that block.

The plugin works as a filter on top of core/code — it never replaces the block. Code blocks are saved with the core block’s own markup, so if you deactivate the plugin, syntax highlighting is removed but all code blocks remain intact and valid. No content is lost. Blocks last saved with version 1.2.3 or earlier convert to this format when you update their post with the plugin active, or all at once from Convert Code Blocks in the banner at the top of Settings > Code Block Highlighting, or with wp wzcbh migrate-code-blocks. Back up your database first, because posts are updated in place without creating revisions.

Was this article helpful?

Tagged:

Related Articles