How to add a snippet using gutenberg on WordPress

By Rebecca
7 Min Read

Snippet using Gutenberg: 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.

Snippet using Gutenberg: SyntaxHighlighter Evolved

The installation and activation of the plugin are simple. You can find it on the plugin repository, but make sure this one is done by (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 several parameters that allow you to personalize your experience, which makes it our choice for this type of task.

In the Settings menu of your WordPress dashboard, you will 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’s individual highlighting. site-wide.

We want to define three specific parameters that most people should be aware of.

Plugin version, line numbers, and tab size

The first is which version of the plugin you are loading. Although the plugin remains up to date in the repository, you can choose between versions 2. x and 3. x of the plugin, depending on how you want to view 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 scrollbars. for large code snippets.

Then you have to show 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’s the ever-controversial tab size. 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 all the way to the bottom of the Settings page, you’ll see a large code preview, as well as a large number of shortcode settings. Your time would be well spent going through them, just to see what all the plugins can do to showcase your snippets. Also, any changes you made above to the code display in the settings will be reflected here. So be sure to hit save after changing any of the options.

While some people aren’t 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.

Or some variations. If you can remember it, you are confident about the different things you will be able to do with this plugin. While you can use long identifiers, the SyntaxHighlighter plugin is built well enough to make your job easier.

Use shortcodes

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 shortcodes. Due to the way the Visual tab works, we suggest you use the Text tab to keep these in special character formatting.

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.

Better yet, the SyntaxHighlighter Evolved block is itself. The plugin installation includes its own Gutenberg block; so if you’re not a shortcode and don’t want to mess around with the settings, you don’t have to. Just find the block under Formatting and insert it into your post or page.

Regardless of how you insert the code, you’ll see the same rendering on the front-end of your WordPress site.

Read more: How to create an animated promotion bar on Divi

To sum up, Snippet using Gutenberg

You may need to present Snippet using Gutenberg to your audience for several reasons. Maybe you write tutorials or post solutions to common problems that the audience can take and use as they see fit? 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.

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


For website maintenance service contact us.

By Rebecca
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it