SyntaxHighlighter Evolved Plugin Adds Gutenberg Support

November 28, 2018

WordPress 5.0 will ship with a code block in the new editor but it doesn’t include syntax highlighting. The code is currently wrapped in pre tags. During the earlier days of Gutenberg’s development, the HTML block had syntax highlighting but the team was not satisfied with its implementation and decided to pull it until they could provide more consistent behavior across blocks.

For now, users will have to depend on a plugin to get syntax highlighting. SyntaxHighlighter Evolved is one of the first plugins of its kind to add Gutenberg support via its own block.

syntaxhighlighter-evolved-plugin-adds-gutenberg-support Theme Builder Layout

The plugin currently adds syntax highlighting to source code on the frontend only. Nevertheless, it’s a great use case for Gutenberg, as the plugin previously required you to remember how to structure the shortcode in a particular way in order to use it.

Ian Dunn contributed the Gutenberg support for SyntaxHighlighter Evolved. In the PR for this feature, Dunn said he wanted to give existing users a way to continue using the plugin after WordPress 5.0 is released:

The syntax highlighting only works on the front end, due to the nature of SyntaxHighlighter. Details are documented in the edit() function’s docblock.

Because of that, this isn’t the ideal syntax highlighting block[1], but this provides a way for existing users to continue using the plugin without having to migrate old posts to a different plugin.

Another limitation is that this PR only supports the language attribute of the shortcode, because I ran out of time/energy. This lays the groundwork, though, so the rest of them can easily be added in a future iteration.

SyntaxHighlighter Evolved is active on more than 40,000 installations and is also used on, so this update to the plugin should help those who rely on it to be able to use the new Gutenberg editor without having to switch back to the old editor when they need to add code to their content.

There is still some debate about the best way to provide syntax highlighting in Gutenberg. Another implementation called Code Syntax Block by Marcus Kazmierczak, extends Gutenberg’s existing code block to offer syntax highlighting, instead of creating a new block for it. It also uses PrismJS syntax highlighter.

Shiny Code is another approach that adds a new block for code and provides a preview inside the Gutenberg editor.

syntaxhighlighter-evolved-plugin-adds-gutenberg-support Theme Builder Layout

In the official plugin directory, the Enlighter plugin, which has 10,000 active installs, offers experimental support for Gutenberg that is being actively developed on GitHub. Kebo Code, a relatively new plugin with fewer than 10 installs, was created to offer syntax highlighting for Gutenberg and currently supports 121 languages and two themes. Users will have to switch to the frontend to see the code rendered with the theme selected.

SyntaxHighlighter Evolved does not yet provide a way for highlighting existing code blocks or transforming a core code block to use the plugin’s syntax highlighting. Converting all existing code blocks might take some time for those who have been using it extensively. Alex Mills, the plugin’s author, said he is considering all of these issues and welcomes patches on the GitHub repository for the plugin. Plugin authors may change their approaches over time, depending on where Gutenberg goes in the future, so users will want to evaluate available plugins periodically to see which ones suit their needs.

Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

gutenberg-one-year-later Theme Builder Layout

Gutenberg: One Year Later

As we quickly head into the final weeks of 2019, we also pass the first anniversary of WordPress 5.0 and, subsequently, Gutenberg coming headlong into our lives. Love it or hate it, Gutenberg is here to stay. If you had asked my thoughts on it last December, I would...

initial-documentation-for-block-based-wordpress-themes-proposed Theme Builder Layout

Initial Documentation for Block-Based WordPress Themes Proposed

In a pull request on the Gutenberg repository yesterday, Riad Benguella created an initial document that outlines how block-based WordPress themes might work. While the document is merely a starting point for the conversation, it is a set of ideas that will likely...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.