Almost all bloggers, creators of contents or technology developers sometimes need to display highlighted snippets of code on their blog. This can be a headache in itself. However, highlighting one or more lines in this snippet may also be necessary, and this functionality is unfortunately not part of most code integrations. Fortunately, the SyntaxHighlighter Evolved plugin exists. We'll show you how to use it to keep the code as clean and readable as possible.

SyntaxHighlighter Evolved

syntax highlighter

Installation and activation of the plugin is simple. You can find it on the WP.org plugins repository but make sure that it is well done by Alex Mills (Viper007Bond), because indeed, there are a lot of results. We do know, however, that this one is reliable and up to date. Moreover, this one comes with a specialized block for the Gutenberg editor. Not to mention a number of parameters that allow you to personalize your experience, which makes it our choice for this type of task.

Syntax highlighter wordpress plugin

In the menu Settings of your WordPress dashboard, you'll find a new item called SyntaxHighlighter . Go ahead and click on it. There you can adjust every little thing that you will need to embed the snippets into your WordPress site.

SyntaxHighlighter settings

The settings page for the plugin is relatively simple. One particular element that we like about this plugin is that you get a good number of customizations regarding how the code is displayed on your site. You can add CSS classes to the embedding, adjust line number padding, choose Themes color, use smart tabs and line breaks, and decide how individual site-wide coding language highlighting loads.

Syntaxhighlighter configuration

We want to define three particular parameters that most people should know.

Plugin version, line numbers and tab sizes

The first is which version of the plugin you are loading. Although the plug-in remains up to date in the repository, you can choose between the 2.x and 3.x versions of the plug-in , depending on how you want to display your code. Both are secure, however, they each offer specific features that the other does not (at the time of writing).

If users copy your code is the most important, version 3.x will do. However, if yours is more useful for display than the actual utility, then the newline in version 2.x may be better for you, as it eliminates the need to use scroll bars. for large code snippets.

Then you need to display or not the line numbers. For large chunks of code and tutorials, line numbers are invaluable. However, when you have short snippets, it is not necessary to permanently label them as lines 1 and 2. Removing them can significantly improve the appearance of the code.

And then there is the tab size still controversial. The default option is 4, but you can change it to any number you want. Including the correct value of 2. (Yes, we realize there is no correct value. We just like 2 spaces for the tabs.)

Your code and shortcodes

If you scroll to the bottom of the page Settings , you will see a large code preview, as well as a large number of shortcode parameters. Your time would be well spent going through them, just to see what all the plugin can do to showcase your snippets. Also, any changes you made above to the code display in the settings above will be reflected here. So be sure to hit save after changing any of the options.

See divi syntaxhighliter modifications

While some people may not be the biggest fans of shortcodes because they can link you to certain plugins, we think these are worth using because they are smart and easy to remember. If nothing else, you need to remember two things and then the plugin will work at its best for you.

ou ou ou et...bien, vous obtenez</li><li>[highlight 5-9]</li></ul>

Or some variations. If you can remember, you are confident about the different things you can do with this plugin. While you can use long identifier, the SyntaxHighlighter plugin is built well enough to simplify your work.

Use short codes

Anywhere you can render a shortcode, you can use them. In Divi or the classic editor, you can use the Text module or the TinyMCE editor and just paste the code between the shortcodes. Due to how the Visual tab works, we suggest using the tab texts to keep these formatting special characters.

Divi text parameter

If you are a Gutenberg / Block Editor user, things are that simple. You can, again, use the text block for this. Even easier, the custom HTML block. As above, paste the code into the shortcode tags.

Block html gutenberg divi

Better yet, the SyntaxHighlighter Evolved block is itself. The plug-in installation includes its own Gutenberg block; so, if you're not a shortcode and don't want to mess with the settings, you don't have to. Just find the block under formatting and insert it into your message or page.

Syntax highliter gutenberg

No matter how you insert the code, you will see the same rendering on the front end of your WordPress site.

To summarize

You may need to present snippets to your audience for many reasons. Maybe you write tutorials or post solutions to common problems that the audience can take and use as they please? But sometimes a GitHub integration just doesn't provide the kind of experience you want for your users. This is when you need a plugin like SyntaxHighlighter Evolved. 

In just a few clicks, with a little customization and a Gutenberg block or shortcode, your audience will explore your code without problems.