Code Snippet Module for Divi Builder


Add Code Snippets to your Divi, Extra and Divi Builder Plugin Pages

This WordPress plugin lets you easily display source code within your Divi Builder pages.

  • Adds a new code snippet module to Divi
  • Syntax highlighting with 73 styles to choose from
  • 154 programming languages supported
  • Seamless escaping and encoding
  • Automatic line numbers
  • Automatic updates. Unlimited installs.

Fully Integrated with Divi Builder

The Code Snippet Module plugin adds a code snippet module to Divi which you can use just like you would any other Divi Module.

Syntax Highlighting

Make the code in your posts easy to read with the Code Snippet module’s clever syntax highlighting. Choose from 73 different color schemes.

Automatic Language Detection

The Code Snippet Module can automatically detect and perform syntax highlighting for 154 languages. So whichever language you use, your code will look great.

Powerful Customization Options

The Code Snippet Module gives you control over how your code is displayed. Add line numbers, adjust tab sizes, or apply custom CSS to get the look you want.

Sold By: Dan Mossop
SKU: CodeSnippetModule Category: Tags: , , , ,


An easier way to display source code samples within your Divi Builder pages and posts? A custom Divi Builder module which lets you display, format and move around your code snippets as easily as you do the other components in your page. Here’s how to use it.

Step 1: Install the Code Snippet Module

The Code Snippet module for Divi Builder comes packaged as a WordPress plugin. To install it, first obtain a copy of the code snippet module. You’ll be emailed a download link to the plugin .zip file. Upload this entire .zip file to your WordPress, via the “Plugins > Add New > Upload” option. Activate the plugin (you should be prompted to do so, but you can also do so from the plugins page if necessary).

Step 2: Add a Code Snippet to your Page / Post

Once installed, go to your page / post edit screen and click to “Insert Module(s)” as you normally would. You should now see a new module called “Code Snippet”, like so:


Click on the “Code Snippet” module and you’ll be taken to the settings for the module.

In the General Settings tab, paste your code snippet into the “Code” box, and optionally give your module a title, like so:


Step 3: Style your Code Snippet

Now go back into the module settings and switch to the “Advanced Design Settings” tab. This is where you’ll find all the options for styling your code snippet, including:

  • Language – by default the code snippet module will try to auto-detect the language your code is written in so that it can highlight its syntax correctly. This setting lets you manually specify which language to use for highlighting.
  • Style – Choose from over 70 styles for your code snippet and highlighting.
  • Show Line Numbers – Choose whether to display line numbers or not.
  • Custom Tab Width – Get your indentation right by specifying how many spaces a tab is equivalent to.
  • Font options – Control the font, size and spacing of the code and header fonts.
  • Border options – Add a border round your code box.

Again, Save & Exit, and preview your page.

Step 4: Polish it off with some Custom CSS

The advanced design options give you a lot of control over how your code snippet look (and I’ll be adding more in the future). But if you want that bit of extra finesse, the Code Snippet module also supports Custom CSS styling for the header, code area and line numbers (as well as the module as a whole).




There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.

Product Enquiry

Pin It on Pinterest

Share This