Code Block Highlighting v1.0: Prism.js Syntax Highlighting for the Gutenberg Code Block

The WordPress Block Editor’s Code block does most of what you need. It wraps content in <pre><code> tags, preserves whitespace, and doesn’t fight the editor. What it doesn’t do is highlight syntax. That’s okay if you want your site visitor to get lost in the plain code. But if you’re like me and want things to look readable, you need syntax highlighting.

I’ve tried a few approaches over the years. Replacing the block entirely breaks existing posts. Registering a custom block splits your content across two different block types. Loading a library in the theme adds CSS and JavaScript to every page, including pages with no code. I settled on a code syntax block plugin that has powered this site’s code blocks for years. But the author closed the plugin more than a year ago.

So I built something that works with the existing code block (same as the previous one) but does a lot more! It uses Prism.js as a frontend highlighter, and you can choose from several themes and a huge collection of programming languages.

How it works

Code Block Highlighting extends the native core/code block using a JavaScript block filter and a render_block_core/code PHP filter. It doesn’t replace the block. It doesn’t register a new one. Your existing posts stay valid.

The block filter adds controls to the Inspector Controls sidebar. The PHP filter reads those attributes at render time and outputs the markup Prism.jsOpens in a new window expects. That’s the whole architecture.

Per-block controls

Open any Code block in the editor, and you’ll see a Syntax Highlighting panel in the block sidebar.

The Language field is a searchable dropdown of all supported languages. Selecting one adds the appropriate language-* class to the <pre> element, which is what Prism uses to apply highlighting.

File name or title lets you set an optional label displayed in the toolbar above the block. I find this useful when showing a specific file rather than a standalone snippet.

Show line numbers toggles Prism’s line numbers plugin. When enabled, a second field appears to set the starting line number — useful if you’re showing a partial file and want the numbers to match the original.

Word wrap adds the word-wrap class, so long lines wrap rather than overflow horizontally.

Highlight lines takes a comma-separated list of lines or ranges, such as 1,3-5. Those lines are highlighted visually via Prism’s line-highlight plugin.

Max height sets a CSS max-height in pixels. Long snippets scroll within the block rather than pushing everything down the page.

The best part is the Save as default option. It saves the current block’s settings as the sitewide defaults for all newly inserted blocks, directly from the sidebar. No need to navigate to the settings page and back.

Sitewide settings

Under Settings → Code Block Highlighting, you can configure the global behaviour of the plugin.

Color scheme gives you 21 Prism themes to choose from, such as One Dark (the default), Dracula, Night Owl, Nord, GitHub Light, VS Code Dark+, Synthwave ’84, and Gruvbox Dark. The editor canvas updates to reflect the active theme, so what you see in the editor matches what visitors see on the frontend.

Copy to Clipboard adds a “Copy” button to each block on the frontend. The Show Language Label and Show File Name controls whether those labels appear in the block toolbar. Default language pre-selects a language when a new Code block is inserted. Font size lets you override the code font size in pixels; set it to 0 to use your theme’s default.

Asset loading

Prism’s CSS and JavaScript only load on pages that contain at least one core/code block. Pages without code get nothing added. If you need to force-load the assets sitewide — for a theme that dynamically injects code blocks, for example — the wz_cbh_force_load_assets filter handles that.

Migrating from code-syntax-block

If you’ve used or are using the code-syntax-block plugin by Marcus Kazmierczak, the plugin reads the title attribute from that format on first load. It automatically migrates it to its own data-title attribute. Your existing content stays untouched until you next save a post.

WebberZone Code Block Highlighting now powers all the code blocks on this site.

What’s not in v1.0

A few things I’ve kept for later releases. The colour scheme is global for now — there’s no per-block theme override yet. There’s no automatic dark/light switching based on system preference either.

And this is a block editor plugin; support for the classic editor isn’t on the roadmap.

I’m also looking into server-side rendering in the next version of the plugin as an alternative to Prism highlighting.

The full source is on GitHubOpens in a new window. Issues and PRs welcome.

Installing

Search for Code Block Highlighting in the WordPress plugin directory, or go to Plugins → Add New in your dashboard.

After activation, go to Settings → Code Block Highlighting to pick a colour scheme and configure your defaults. Open any post with a Code block and the new controls will be waiting in the sidebar.