+44 0330 223 3428
Call Us
+44 0330 223 3428

WPTavern: SyntaxHighlighter Evolved Plugin Adds Gutenberg Support

WPTavern: SyntaxHighlighter Evolved Plugin Adds Gutenberg Support

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.

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 WordPress.com, 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.

Shiny code

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.


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. The plugin currently adds syntax…

Source: WordPress

Related Post
WPTavern: Matt Mullenweg Publishes TED Talk on the Future of Work, Prepares to Launch New Distributed.blog Website

WPTavern: Matt Mullenweg Publishes TED Talk on the Future of Work, Prepares to Launch New Distributed.blog Website Matt Mullenweg is teasing out a new website at distributed.blog with the tagline “The future of work is here.” It’s not clear yet whether subscribers to the mystery blog will be on board for blog posts, a new […]

Read more
WPTavern: WPBrigade Patches Critical Vulnerability in Simple Social Buttons Plugin

WPTavern: WPBrigade Patches Critical Vulnerability in Simple Social Buttons Plugin WPBrigade, the developers behind the Simple Social Buttons plugin, have patched a critical privilege escalation vulnerability. The security issue was discovered by the team at WebARX. Developer and researcher Luka Šikić summarized the vulnerability in a post published this week: Improper application design flow, chained […]

Read more
WPTavern: WPWeekly Episode 345 – The Relationship Between Corporate Cash and Open Source Software

WPTavern: WPWeekly Episode 345 – The Relationship Between Corporate Cash and Open Source Software In this episode, John James Jacoby and I discuss a thought-provoking post published by Morten Rand-Hendriksen that takes a deep look at equity in open source software. Morten suggests that the mantra of decisions are made by those who show up […]

Read more