If you run a technical blog on WordPress, you know the pain. You paste a markdown article with fenced code blocks, Gutenberg creates bland core/code blocks with no syntax highlighting, no copy button, no dark mode. You end up wrestling with third party plugins that haven’t been updated in years or manually formatting every code snippet.
I built CloudScale Code Block to solve this once and for all. It’s a lightweight WordPress plugin that gives you proper syntax highlighting with automatic language detection, a one click clipboard copy button, dark and light theme toggle, full width responsive display, and a built in migration tool for converting your existing code blocks. It works as both a Gutenberg block and a shortcode for classic editor users.
In this post I’ll walk through how to install it, how to handle the Gutenberg paste problem, and how to migrate your existing code blocks.
1 What You Get
CloudScale Code Block uses highlight.js 11.11.1 under the hood with support for 28 languages out of the box. When you add a code block in the editor, you get a clean textarea with a toolbar showing the block type, detected language, and optional title (useful for filenames). On the frontend your visitors see beautifully highlighted code with line numbers, a copy to clipboard button, and a toggle to switch between dark (Atom One Dark) and light (Atom One Light) themes.
The plugin has zero build step required. No webpack, no npm install, no node modules. Upload it and activate.
2 Installation
Download the plugin ZIP file:
Download CloudScale Code Block Plugin
Then install it through your WordPress admin:
- Go to Plugins > Add New > Upload Plugin
- Choose the ZIP file and click Install Now
- Click Activate Plugin
That’s it. You’ll see CloudScale Code Block available in the Gutenberg block inserter under the Formatting category. You can also access settings at Settings > CloudScale Code to configure the default theme.
3 The Gutenberg Paste Problem
Here’s something every WordPress developer needs to know. When you paste markdown containing fenced code blocks (the triple backtick syntax), Gutenberg’s built in markdown parser intercepts the paste event before any plugin can touch it. It converts the fenced blocks into core/code blocks, which are WordPress’s default code blocks with no syntax highlighting.
This isn’t a bug in any plugin. It’s how Gutenberg’s paste pipeline works internally. The markdown parser runs synchronously during the paste event, creates the core blocks, and only then gives plugins a chance to respond.
CloudScale Code Block handles this with a practical solution: a floating convert toast.
4 Converting Pasted Code Blocks
When you paste markdown that contains fenced code blocks, Gutenberg will create core/code blocks as described above. CloudScale detects this automatically and shows a floating notification in the bottom right corner of the editor:
⚠️ 2 core code blocks found ⚡ Convert All to CloudScale
Click the Convert All to CloudScale button and every core/code and core/preformatted block in the post is instantly replaced with a CloudScale Code Block. The code content is preserved exactly as it was, and highlight.js will auto detect the language on the frontend.
This is a one click operation. Paste your markdown, click Convert All, done.
5 Migrating Existing Posts
If you have an existing blog with dozens or hundreds of posts using WordPress’s default code blocks or the Code Syntax Block plugin, you don’t want to edit each post manually. CloudScale Code Block includes a built in migration tool that handles this in bulk. Once the plugin is activated, go to Tools > Code Block Migrator in your WordPress admin.
5.1 How the Migrator Works
The migrator handles three types of legacy blocks:
wp:code blocks are the default WordPress code blocks. The migrator extracts the code content, decodes HTML entities, and detects the language from any lang attribute or language-xxx CSS class.
wp:code-syntax-block/code blocks are from the popular Code Syntax Block plugin. The migrator reads the language from the block’s JSON attributes where Code Syntax Block stores it.
wp:preformatted blocks are WordPress preformatted text blocks that some themes and plugins use for code. The migrator converts br tags back to proper newlines and strips any residual HTML formatting.
5.2 Migration Workflow
The process is straightforward:
- Click Scan Posts to find every post and page containing legacy code blocks
- The scan results show each post with a count of how many code blocks it contains
- Click Preview on any post to see a side by side comparison of the original block markup and what CloudScale will produce
- Click Migrate This Post to convert a single post, or use Migrate All Remaining to batch convert everything
The migrator writes directly to the database and clears the post cache, so changes take effect immediately. I recommend taking a database backup before running a bulk migration, but in practice the conversion is deterministic and safe. The migrator only touches block comment delimiters and HTML structure. Your actual code content is never modified.
5.3 After Migration
Once migration is complete you can deactivate the Code Syntax Block plugin if you were using it. All your posts will now use CloudScale Code Block format and render with full syntax highlighting on the frontend.
6 Technical Details
For those interested in what’s under the hood:
The plugin registers a single Gutenberg block (cloudscale/code-block) with a PHP render callback. The block stores its data as three attributes: content (the raw code text), language (optional, for explicit language selection), and title (optional, shown above the code). The block uses save: function() { return null; } which means all rendering happens server side via PHP. This makes the block resilient to markup changes and avoids the dreaded “This block contains unexpected or invalid content” error that plagues so many WordPress code plugins.
Frontend assets are loaded on demand. The highlight.js library, theme stylesheets, and the clipboard/toggle JavaScript are only enqueued when a post actually contains a CloudScale Code Block. No unnecessary scripts on pages that don’t need them.
The auto convert watcher uses wp.data.subscribe to monitor the Gutenberg block store for core/code and core/preformatted blocks. When it finds them, it renders a floating toast with a convert button. The conversion calls wp.data.dispatch(‘core/block-editor’).replaceBlock() to swap each core block for a CloudScale block, preserving the code content and extracting any language hints from the original block’s attributes.
7 Configuration
The plugin includes a settings page at Settings > CloudScale Code where you can set the default theme (dark or light) for all code blocks on your site. Individual blocks can override this setting using the Theme dropdown in the block’s sidebar inspector.
You can also set the language explicitly per block if auto detection isn’t picking the right one. The language selector supports 28 languages including Bash, Python, JavaScript, TypeScript, Java, Go, Rust, SQL, YAML, Docker, and more.
8 Shortcode Support
For classic editor users or anywhere you need code highlighting outside of Gutenberg, the plugin provides a shortcode called cs_code. Wrap your code between the opening and closing tags and optionally set the language, title, and theme parameters. The shortcode renders identically to the Gutenberg block on the frontend, complete with syntax highlighting, copy button, and theme toggle.
After you publish this post, you can add a shortcode example manually by inserting a CloudScale Code Block in the editor and typing the example there. This avoids WordPress trying to execute the shortcode during paste.
Wrapping Up
CloudScale Code Block is purpose built for technical bloggers who want clean, highlighted code on their WordPress sites without fighting the editor. The paste convert workflow means you can write in markdown, paste into Gutenberg, click one button, and publish. The built in migration tool means your existing content gets the same treatment without manual editing.
The plugin is free and open source. Grab it using the link above and let me know how it works for you.