Skip to Main Content

How to add a code snippet using Gutenberg on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Almost every blogger, content creator, or tech developer needs to post highlighted snippets on their blog from time to time. It 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 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 Parameters 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 straightforward. One particular element that we like about this plugin is that you get a good number of customizations regarding the way the code is displayed on your site. You can add CSS classes to the embedding, adjust the row number padding, choose color themes, use smart tabs and line breaks, and decide whether to load the coding language individual highlighting. site-wide.

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).

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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 Parameters , 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.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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></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 make a shortcode, you can use them. In Divi or the classic editor, you can use the Text module or the TinyMCE editor and simply paste the code between the short codes. Due to the way the Visual tab works, we suggest you use the 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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top