How to highlight code in Gutenberg editor?

Default WordPress editors were never really developer friendly with their plain text editor interface and no color highlighting. With Gutenberg, the default theme editor improved a lot with syntax highlighting and auto-complete funcion. Unfortunately, writing code in page or post editor is still a painful and slow process. Therefore, the first thing you want to do when starting your project is installing a third party code highlighter plugin.

There’s a dozen of free plugins in the WP repository for that purpose, we tested them and picked our favorite.

HTML Editor Syntax Highlighter plugin for WordPress

Created by James Bradford, the HTML Editor Syntax Highlighter plugin at the time of writing this article (April 2019) has over 40.000 active installations. It scores an average vote 4.5 on a basis of 80+ voters in the WordPress plugins repository. The plugin’s current version 2.4.1 is one of the best rated code highlighting and editing plugins in the WP repo at the moment.

This is a free plugin, but don’t hesitate do drop a donation to the author and give it a good vote if you find it useful.

Gutenberg post editor with highlighted code after installing the plugin

Installing and Setting up HTML Editor Syntax Highlighter

The installation of this code highlighting plugin is really simple. Search the WP plugins repository from within your WordPress dashboard, or download it and upload into your theme’s Plugins folder.

The best thing about setting up this code highlighting plugin is that there is no setting up. It works right out of the box! HTML Editor Syntax Highlighter doesn’t have a dedicated settings page and we find it great. Other code editors have extensive and confusing settings which if not configured properly can lead to misbehavior of the editor. This plugin is deprived of that part, so you can start writing code right away.

A couple of basic settings are accessible by clicking a gear button in the top right corner of the editor window. We consider this as a pretty good solution.

HTML Syntax Highlighter preferences are available directly from the code editor window

Working with HTML Editor Syntax Highlighter for WordPress

HTML Editor Syntax Highlighter uses CodeMirror.js for code higlighting and it integrates seamlessly into WordPress. It replaces the default theme/plugins editor and adds syntax highlighting fuctionality to the Code View of the pages / posts editor.

While writing or editing your code you can quickly modify some preferences using the gear icon. There’s no need of leaving the editor, saving your changes and opening a dedicated settings page. You can personalize the editor’s look choosing the coloring scheme from a variety of themes. Also, you can adjust it behaviour by turning on and off line numbering, automatic tag closing, higlighting blocks of code and a couple more preferences. Simple and useful.

This code editor comes with a couple of handy keyboard shortcuts. We suggest you get familiar with them from the very start. Saving documents, searching and replacing strings of code, jumping to line numbers and turning full screen on and off are just some of them.

HTML code higlighting in Gutenberg editor

Of all the code highlight plugins we tested, our opinion is that HTML Editor Syntax Highlighter integrates with WordPress Gutenberg editor the best way so far. The visual Gutenberg block editor doesn’t get affected by this plugin. The magic happens when you switch to the code editor mode. The look and behavior of the editor window becomes the same as the the theme editor, with colored code, line numbers, keyboard shortcut and the handy gear icon. Therefore, this plugin literally turns writing code in WordPress pages and posts from a nightmare into a dream.

Downsides of this code highlighter plugin in Gutenberg

WordPress did a very good job by replacing the old theme files editor with a new one in Gutenberg. The code editor now offers syntax highlighting, but also code completion and validation by default. HTML Editor Syntax Highlighter plugin lacks of code completion suggestions and code validation, which we hope the authors will implement into the future versions of the plugin. Unfortunately, it is not possible to disable the plugin for theme files and keep it for pages and posts editor. That would be a cool feature which we are looking forward to see in the upcoming updates of the plugin.

Nevertheless, HTML Editor Syntax Highlighter is a great plugin which we absolutely suggest using for writing and editing code in WordPress.

Download the Plugin