Last year, WordPress.com introduced new code editors for the block editor and the Additional CSS input box in the WordPress admin. This was the first stage of a larger effort to make editing code a more enjoyable experience.
Today, I’m happy to announce the launch of the second stage of that effort: introducing the new and improved Code block.
This is not a new block. It’s an enhancement to the current Code block that you’ve likely already been using, which includes several improvements over the original:
- Syntax highlighting: Supports color-based syntax highlighting for over 100 common languages.
- Configuration: Decide to show the filename, language name, line numbers, and even include a copy button for visitors.
- Drag-and-drop: Dragging a code file from your computer to the editor will automatically transform it to the Code block with the language set.
- Transforms: Transform other code-supported blocks on WordPress.com, such as Syntax Highlighter, to the new Code block.
- Styles: Customize syntax colors directly from the editor or via ‘theme.json’ if you’re a developer.
Using the enhanced Code block
You do not have to enable anything to begin using the new version of the Code block. It’s already available to use. Just insert the Code block anywhere in the block editor and add your code.
By default, when adding a Code block and inserting code, you will see your code in Plain Text:
Of course, Plain Text doesn’t include any syntax highlighting since it’s not a language. To change this, choose a code language from the Settings → Language dropdown in the sidebar:
Syntax highlighting will then be applied based on the language that you selected, making the code much more readable for both you and your visitors!
Pro tip: If you type three backticks followed by the language name (e.g., ```php) and then hit Enter, the editor will automatically create a new Code block instance and auto-fill the Language setting.
If you want to kick your Code block’s features up a notch, you can also configure several other settings besides the language:
- Filename: Add a custom filename to display in the top left of the code block (useful when walking readers through tutorials).
- Show language name: Displays the language name in the top right corner of the block.
- Show copy button: Inserts a Copy button in the top right of the block, allowing site visitors to copy the entirety of the code.
- Show line numbers: Displays line numbers next to your code on the left.
- Line numbers start at: Choose a starting line number.
This will make your site’s code examples much more reader friendly:
Customizing the Code block colors
There are multiple ways to customize the syntax highlighting and colors shown with the enhanced Code block. In this section, I’ll walk you through each from the quickest/simplest to the more advanced techniques.
Selecting a block style
The Code block ships with four block styles out of the box:
- Default: Will use the default styles and colors from your theme.
- No Highlight: Disables syntax highlighting.
- Solarized Light: A light color scheme.
- Solarized Dark: A dark color scheme.
Themes can also register additional styles. Selecting one of these styles is the quickest way to change how your Code block is output:
Customizing colors from the editor
You can also customize the colors directly from the editor via the Styles → Color panel in the block sidebar. The block has an extensive array of color options for customizing every aspect of the syntax highlighting:
You are not limited to only colors either. You can customize any of the other available styles, such as Typography, Border, and more. These options haven’t changed with the latest enhancement.
Customizing the Code block via theme.json
If you’re a developer or theme author, you’ll most likely want to define default syntax colors and other styles for the default output of the block. theme.json support is included with this batch of enhancements.
Here’s what my custom Code block styles look like after a few tweaks in theme.json:
Because the WordPress software itself doesn’t support custom colors via theme.json, the developers at WordPress.com built in custom support for this feature.
You can customize any of the syntax colors via settings.custom.core/code in theme.json. This is an object where each key is the syntax color name and the value is the color itself.
Here’s an example snippet that you can use to customize your own colors:
Any valid CSS color is supported, so you’re not limited to hex color codes. Use CSS custom properties, RGBA, and more.
If you want to borrow my full theme.json customizations, copy and paste the following code. It includes additional custom styles to make the Code block even nicer:
Start sharing code now.
Whether you’re publishing snippets or full-blown tutorials, the enhanced Code block makes sharing and styling code in WordPress.com smoother and more customizable than ever before.
Syntax highlighting, block styles, and custom color options put you in full control of how your code appears.
With these improvements, you can focus less on formatting and more on writing great content that helps your readers learn and build.
