Divi Plugin Highlight: Code Snippet Module

Posted on July 22, 2017 by in Divi Resources 13 Comments

Divi Plugin Highlight: Code Snippet Module
Blog / Divi Resources / Divi Plugin Highlight: Code Snippet Module

Lots of websites display source code within their articles. Displaying source code isn’t always easy. Most sites use plugins that require tags, shortcodes, embedded links, or similar solutions. The solutions can sometimes feel clumsy and even cause formatting problems. Another option is a plugin for Divi called Code Snippet Module.

Code Snippet Module is a third-party plugin that adds a new module to the Divi Builder to display code. This is different from the Divi Builder Code module. The standard Code module runs the code that you place within it. The Code Snippet module displays the code with syntax highlighting. Code Snippet Module works with Divi, Extra, and the Divi Builder plugin.

In this article we’ll see how the module works, how it can be styled to fit with your website’s design. Code for this plugin highlight was taken from W3Schools.com and is only meant to demonstrate how code is displayed within the code snippet module. Images for example layouts were taken from Unsplash.com.

Installation and Settings

Upload and activate the plugin as normal. No account info is required. The Code Snippet Module will be added to the Divi Builder.

The module includes the code box in the Content tab. The Design tab has lots of settings for code styling. Settings include language (for highlighting), style (the color scheme), show numbers, custom tab width, and lots of font styles. It also includes the standard heading and border styling.

It will attempt to auto-detect the language by default. If it has trouble with the auto-detect some of the code may not be formatted correctly. If this happens you can choose the language manually. I had no issues with the auto-detect formatting the language correctly.

It has over 70 styles. They mostly change the colors of the fonts and the backgrounds. Some have background patterns but most are solid colors. The fonts match a code-type, so variables will be one color, statements will be another, comments use a different color, etc.

Using the Code Snippet Module

The image above shows the standard Divi Code module on top and the Code Snippet module on bottom. This shows how the two modules react with code. Both modules have the same HTML code placed within them. The Divi Code module runs the code. The Code Snippet module displays the code.

This is the default settings. Let’s take a look at several languages using different styles. I’ve included the default settings for each one to help you compare.


This is the same code as in the previous example. It’s using the default style, but I’ve added line numbers and changed the font to Georgia. I increased the font size to 18 point. Tags are in bold.

Here’s a look at comments in the default settings. The comments are light gray so they look different than the markup.

This one uses the style called Darkula. The tags are in orange.


The CSS selectors and properties are in bold. Numerical values are in red. Braces and textual values use the default code font. This uses auto-detect and the default style.

This is the Agate style. Selectors are in orange and properties are in yellow. Braces and textual values on in the default white font while numerical values are in red.

CSS comments are light gray in the default settings.

This example uses Codepen Embed.

This one is Estuary Dark. I’ve included line numbers.

Here’s Estuary Light. I’ve included the line numbers in this one as well.


Here’s a JavaScript snippet using the default settings. Statements are in green and gray while the HTML element and values are red.

This is JavaScript using the style called Android Studio. Statements are in a grayish blue while the HTML element and values are green.

Here’s the same snippet using Arduino Light. I’ve added a blue background to the row to make the code snippet module stand out. Statements are in red and grayish blue while the HTML element and values are green.

This one includes comments. The comments are multi-colored.

This is the same code using Dune Dark.

This is Dune Light.

This one uses Far. I’ve added line numbers.


The SQL statements are in bold while the tables use the default font. Values are in red.

This uses the style called Brown Paper. The statements are in blue, tables are black, and values are purple. This is one of the few styles that use a pattern in the background.

Here’s the default settings with comments. The comments are lighter than the rest of the code.

Here’s a look at Foundation. I’ve included line numbers.


The PHP language tags are in blue. Keywords use the default font, functions are in bold, and variables are in red.

This examples uses Cave Dark. The PHP language tags are in red. Keywords are gray, functions are in purple, and variables are in blue/green.

This one is Cave Light. It has a slight purple background and the colors for the code are a variation of Cave Dark.

This one has comments using the default settings.

This style is Github. The comments are in italics.

This is Github Gist.

This one is Google Code.

This one is Visual Studio. This will look familiar to VS users. I’ve added a background to help it stand out. Using a border is another option.


Here’s a Bootstrap example using the default styles. Bootstrap isn’t specifically stated as a language (since it’s an HTML, CSS, and JavaScript framework) but I wanted to show that it does format correctly.

This is Pojoaque.


Here’s a look at jQuery.

This uses XT256. I’ve given it a border to help it stand out.


Here’s an example of XML using the default settings.

This is Zenburn. I’ve chosen XML from the dropdown and as you can see the auto-detect in the previous image has formatted the code correctly.

This one is School Book. I’ve added line numbers. The code lines up with the page lines at this font size. Increasing the size aligns them differently.

Making Adjustments

This is a PHP snippet. Let’s make some manual changes to the design.

I changed the code font type, size, color, and line height. I also added a border.

Tab Width

In this example (which uses Sulphur Pool Light) I added tabs before pasting in the code. Fortunately you can adjust the tab width so the code displays correctly.

I’ve adjusted the tab width to 1, which decreases the amount the tab is indented. This is Sulphur Pool Dark.

Custom Styling

The code snippet display area can even be styled with CSS. The documentation includes some styling examples. This is one of the examples provided.

Layout Examples

Of course the advantage of the module is that it uses the Divi Builder and fits in with your Divi layouts. There are enough styles that you can fit it into the design of your site with ease. This one uses Paraiso Light. It fits in well with the styling of my sample page.

This one is Railcasts. I’ve customized the header font style, size, and color to match the headers of the page.

This one uses the blog post layout from Divi 100. The code style is Solarized Light.

It also works great with Extra. This example uses Plateau Dark.

License and Documentation

It has unlimited installs. It even comes with a 60 day money back guarantee. Documentation is provided on the developer’s website. It includes instructions and CSS styling examples.

Final Thoughts

Code Snippet Module is a great way to display code within your Divi layouts. It’s easy to change the look and feel and the code is clean and can be copied for pasting. I’ve only shown a small handful of the many languages it’s compatible with and I had no issues with formatting. All of the styles work with all of the languages and they can be styled further using CSS. If you provide code for your readers, Divi Snippet Module might be the plugin you need.

We want to hear from you! Have you used Code Snippet Module? Let us know what you think in the comments below.

Featured Image via hanss / shutterstock.com

Divi Cyber-monday Sale

It's The Divi Cyber Monday Sale! Save Big For A Limited Time 👇

Save big on Divi and Divi products for a limited time.

Access The Sale
Divi Cyber-monday

Divi Supreme Pro

With 50+ Divi premium modules and extensions to choose from. Take ...

View Product

7787 Sales

Divi Plus

A versatile multipurpose plugin with lots of modules to design & ...

View Product

5195 Sales


A powerful menu builder that brings the coolest designs and popups ...

View Product

3720 Sales


Most Popular Divi Plugin with 40+ Powerful Modules, 4+ Useful ...

View Product

1117 Sales

Woo Essential

The best all-in-one approach to WooCommerce website design for all ...

View Product

535 Sales

Divi Essential

All in one set of 60+ design modules with 500+ layouts for all Divi ...

View Product

2858 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

4913 Sales

Graphina-Divi Dynamic Charts & Graphs

Most Powerful Data visualization plugin for WordPress Divi Builder.

View Product

571 Sales

Premade Layouts

Check Out These Related Posts

Divi Plugin Highlight: Divi Mega Pro

Divi Plugin Highlight: Divi Mega Pro

Last Updated on December 6, 2022 in Divi Resources

Divi Mega Pro is a third-party plugin for Divi that adds the ability to create mega menus and tooltips with the Divi Builder. Since the mega menus and tooltips are created with the Divi Builder, you can use any modules you want, including third-party modules, shortcodes, and code, and style them...

View Full Post


  1. Wonderful module.
    Supports new syntax for unsupported languages?

    • Hi Franscisco. It displayed the few I tried, but I’m sure it wouldn’t display them all.

    • Hi Francisco. I’ve spoken to you about this already, but just for everyone else’s benefit, it doesn’t yet offer a way to add new languages to the built-in list. I’ll look into adding this in the future.

  2. Hi Randy, thank you for writing this blog piece, it’s much appreciated. A quick question. Could I use this plugin to add JSON-LD Local Business Schema which would only be read by search bots and not by visitors to my site? I have recently worked through a course with Yoast where they cover manually adding schema for WordPress but I can’t for the life of me figure out (other than the Code module itself) where I would add the markup within the Divi theme. If you could give me some advice I would be most grateful. Many Thanks, Lee

    • Hi Lee. That’s an interesting question. I’m not sure if the code is picked up by schema or not. I’ll see if I can find out.

    • Hi Lee. The Code Snippet module won’t help you with this, as it’s for displaying source code, not executing it as you need to.

      Assuming you want to add your JSON-LD code to all the pages on your site, you should be able to add it by going to Divi > Theme Options > Integrations and pasting it into either the “Add code to the ” or “Add code to the of your blog” boxes (after anything else already in there).

  3. This nice WordPress theme. I will have to use eleganttheme for website. The feature is OK also support syntax.

  4. Hey great find Randy!

    Just what the Dr. ordered. I’ve been looking for this exact plugin as I too write tutorials that require code snippets. Just purchased the plugin and took it for a test drive. So far, so good.


    • Thanks for the follow up Carlos. I’m glad it’s working for you.

  5. I installed and activated the plugin and don’t see it when I’m in the divi builder trying to insert a module.

  6. Looks great on the blog post, but once I pay for it and install it, I don’t get the new module available anywhere.

  7. Bought the plugin, installed it, but am not getting the option added to the Divi modules menu.

  8. Some issue with the comment window, so sorry with duplicate comments. @admin please you could delete it.

Join To Download Today