The improved code block: syntax highlighting and more

Last year, WordPress.com introduced new code editors for the block editor and additional CSS input box in the WordPress admin. This was the first phase of a larger effort to make code editing a more enjoyable experience.

Today I am pleased to announce the launch of the second phase of that effort: introducing the new and improved code block.

This is not a new block. It improves on the current code block you’re probably already using, and includes several improvements over the original:

• Syntax highlighting: Supports color-based syntax highlighting for more than 100 commonly used languages.
• Configuration: Decide to display the file name, language name, line numbers and even include a copy button for visitors.
• Drag and drop: If you drag a code file from your computer to the editor, it will automatically be converted to the code block with the set language.
• Transforms: Transform other code-supported blocks on WordPress.com, such as Syntax Highlighter, to the new code block.
• Styles: Adjust syntax colors directly from the editor or via ‘theme.json’ if you are a developer.

Using the improved code block

You don’t need to enable anything to start using the new version of the code block. It is already available for use. Place the code block somewhere in the block editor and add your code.

When you add a code block and insert code, you see your code in plain text by default:

Of course, plain text doesn’t include syntax highlighting, because it’s not a language. To change this, choose a code language from the Settings → Language dropdown in the sidebar:

Syntax highlighting is then applied based on the language you selected, making the code much more readable for both you and your visitors!

For a tip: If you type three backticks followed by the language name (e.g. ```php) and then hit Enterthe editor will automatically create a new code block instance and use the Language setting.

If you want to take your code block’s features a step further, you can configure several other settings in addition to the language:

• File name: Add a custom file name to display at the top left of the code block (useful when guiding readers through tutorials).
• Show language name: Shows the language name in the upper right corner of the block.
• Show copy button: Inserts a Copy button in the top right corner of the block so site visitors can copy the entire code.
• Show line numbers: Shows line numbers next to your code on the left.
• Line numbers start at: Choose a starting line number.

This makes your site’s code examples much more reader-friendly:

Adjust the code block colors

There are multiple ways to customize the syntax highlighting and colors displayed with the enhanced code block. In this section I will guide you through each technique, from the fastest/simplest to the more advanced techniques.

Select a block style

The Code block comes with four block styles by default:

• Standard: Uses your theme’s default styles and colors.
• 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 fastest way to change how your code block runs:

Adjust colors from the editor

You can also adjust the colors directly from the editor via the Styles → Color panel in the block sidebar. The block has an extensive set of color options to customize every aspect of the syntax highlighting:

You’re not limited to just colors either. You can customize all other available styles such as Typography, Border and more. These options have not changed with the latest improvement.

Customize the code block via theme.json

If you’re a developer or theme author, you’ll probably want to define default syntax colors and other styles for the block’s standard output. theme.json support is included in this set of improvements.

This is what my custom code block styles look like after a few tweaks theme.json:

Because the WordPress software itself does not support custom colors via theme.jsonWordPress.com developers have built in custom support for this feature.

You can customize all syntax colors via settings.custom.core/code in theme.json. This is an object where each key is the color name of the syntax and the value is the color itself.

Here’s a sample snippet you can use to customize your own colors:

Any valid CSS color is supported, so you are not limited to hexadecimal color codes. Use custom CSS properties, RGBA and more.

If you want to borrow my entire theme.json modifications, copy and paste the following code. It includes additional custom styles to make the code block even more fun:

Start sharing code now.

Whether you’re publishing snippets or full tutorials, the improved 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 give you complete control over how your code appears.

With these improvements, you can focus less on formatting and more on writing great content that your readers can learn and build with.