Divi Code Snippet Module

Display syntax-highlighted source code in your Divi Builder pages

Syntax highlighting for 70+ languages
Automatic language detection (with manual override if needed)
Formatting options to control styles, line numbers, indentation, and more

Lifetime license. Nothing more to pay.
Automatic updates. 90 day money back guarantee.

Divi Show / Hide Button Module
WP 6.5.3 Compatible

Display Source Code in Divi

The Divi Code Snippet Module plugin adds a code snippet module to the standard Divi Builder which you can use just like you would any other Divi Module. It works with Divi, Extra, and the Divi Builder plugin and is Visual Builder compatible.

With all the features you need to display code in your posts:

  • Syntax-highlighting
  • Automatic language detection
  • Pre-designed color schemes
  • Support for Divi style options
  • Display line numbers
  • Control tab widths
  • Copy-to-Clipboard button
  • Compatible with Supreme AI Writer

Note that the Divi Code Snippet Module is for displaying source code, for example in programming tutorials. If you want to actually run and display the output of PHP code, check out Divi PHP Code module instead!

 

 

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.

// Calculate the nth fibonacci number
function fibonacci($n) {
    return round(pow((sqrt(5)+1)/2, $n) / sqrt(5));
}
// Calculate the nth fibonacci number
function fibonacci($n) {
    return round(pow((sqrt(5)+1)/2, $n) / sqrt(5));
}
// Calculate the nth fibonacci number
function fibonacci($n) {
    return round(pow((sqrt(5)+1)/2, $n) / sqrt(5));
}
// Calculate the nth fibonacci number
function fibonacci($n) {
    return round(pow((sqrt(5)+1)/2, $n) / sqrt(5));
}
// Calculate the nth fibonacci number
function fibonacci($n) {
    return round(pow((sqrt(5)+1)/2, $n) / sqrt(5));
}
// Calculate the nth fibonacci number
function fibonacci($n) {
    return round(pow((sqrt(5)+1)/2, $n) / sqrt(5));
}
Full List of Supported Languages

Syntax highlighting is currently supported for the following languages:

  • 1C

  • Access logs

  • ARM assembler

  • AVR assembler

  • ActionScript

  • Apache

  • AppleScript

  • AsciiDoc

  • AspectJ

  • AutoHotkey

  • AutoIt

  • Axapta

  • Bash

  • Basic

  • BNF

  • C

  • C#

  • C++

  • C/AL

  • Cache Object Script

  • CMake

  • CSP

  • CSS

  • Cap'n Proto

  • Clojure

  • CoffeeScript

  • Crmsh

  • Crystal

  • D

  • DNS Zone file

  • DOS

  • Dart

  • Delphi

  • Diff

  • Django

  • Dockerfile

  • DTS (Device Tree)

  • Dust

  • Elixir

  • Elm

  • Erlang

  • F#

  • FIX

  • Fortran

  • G-Code

  • Gams

  • GAUSS

  • Gherkin

  • Go

  • Golo

  • Gradle

  • Groovy

  • HTML / XML

  • HTTP

  • Haml

  • Handlebars

  • Haskell

  • Haxe

  • Ini

  • Inform7

  • IRPF90

  • JSON

  • Java

  • JavaScript

  • Jinja

  • Lasso

  • Less

  • Lisp

  • LiveCode Server

  • LiveScript

  • Lua

  • Makefile

  • Markdown

  • Mathematica

  • Matlab

  • Maxima

  • Maya Embedded Language

  • Mercury

  • Mizar

  • Mojolicious

  • Monkey

  • Moonscript

  • NSIS

  • Nginx

  • Nimrod

  • Nix

  • OCaml

  • Objective C

  • OpenGL Shading Language

  • OpenSCAD

  • Oracle Rules Language

  • Oxygene

  • PF

  • PHP

  • Parser3

  • Perl

  • PowerShell

  • Processing

  • Prolog

  • Protocol Buffers

  • Puppet

  • Python

  • Python profiler results

  • Q

  • QML

  • R

  • RenderMan RIB

  • RenderMan RSL

  • Roboconf

  • Ruby

  • Rust

  • SCSS

  • SQL

  • STEP Part 21

  • Scala

  • Scheme

  • Scilab

  • Smali

  • Smalltalk

  • Stan

  • Stata

  • Stylus

  • Swift

  • Tcl

  • TeX

  • Thrift

  • TP

  • Twig

  • TypeScript

  • VB.Net

  • VBScript

  • VHDL

  • Vala

  • Verilog

  • Vim Script

  • x86 Assembly

  • XL

  • XML

  • XQuery

  • YAML

  • Zephir

If you need a syntax highlighting for a language that isn't listed here, please get in touch

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.

Bash

for i in 1 2 3 4 5
do
    # must have at least one command in loop
    echo $i  # just print value of i
done

C/C++

int sum = 0;
for (int i = 1; i < 6; ++i) {
    sum += i;
}

JavaScript

for (var key in array) {  
  // Do something with array[key]
}

Python

for counter in range(1, 6):  # gives values from 1 to 5 inclusive
  # do something here

PHP

for ($i = 0; $i <= 5; $i++)
{
  for ($j = 0; $j <= $i; $j++)
  {
    echo "*";
  }
  echo "<br>";
}

Ruby

5.times do |counter|  # counter iterates from 0 to 4
  # statements
end

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.

Add Line Numbers

/* Blog Posts */
.et_pb_post {
	margin-bottom: 42px;
}

Fix Tab Sizes

/* Blog Posts */
.et_pb_post {
	margin-bottom: 42px;
}

Add a Click to Copy Button

/* Blog Posts */
.et_pb_post {
	margin-bottom: 42px;
}

Advanced Design Settings

/* Blog Posts */
.et_pb_post {
	margin-bottom: 42px;
}

Custom CSS Support

/* Blog Posts */
.et_pb_post {
	margin-bottom: 42px;
}

Compatible With Your Site and Plugins

Divi Code Snippet module is designed for compatibility with a wide range of site configurations. It is regularly tested on the latest and older versions of PHP and WordPress, as well as with:

Divi

The Divi Code Snippet module is fully compatible with Divi and the Divi Builder plugin. It is regularly tested on the latest version, and is visual builder compatible.

Extra

The Divi Code Snippet module is fully compatible with the Extra theme. It is regularly tested on the latest version, and is visual builder compatible.

Supreme AI Writer

The Divi Code Snippet module is fully compatible with the AI code writing feature of Supreme AI Writer by Divi Supreme, so you can easily generate and display code.

Divi Code Snippet Module

Automatic updates. No recurring fees.
90 day money back guarantee.

Got a Question?

12 Comments

  1. v1.3.8 adds support for YAML and Jinja.

    Reply
  2. I'm having trouble with the Code Snippet Module when I use it with WordPress Multisite. After adding a code module to a page and checking it with the Preview mode, the PHP code executes properly and displays the expected results on the page. When I Update the page and view it, the code does not execute and an error message shows "Error: Content could not be displayed". The same PHP code works properly using an XYZ Insert PHP Code Snippet shortcode. WordPress 6.3.1; PHP Version 7.4.33; no active plugins other than the two mentioned above. Any help you can provide is appreciated.

    Reply
    • Hi David. Sorry to hear you've been having this issue.

      First, just for clarity, it seems your issue relates to the Divi PHP Code Module (which executes PHP code), not the Divi Code Snippet Module (used for displaying source code) described on this page. It's easy to confuse the two, but they serve slightly different purposes.

      Regarding your issue, I've attempted to replicate this on Multisite but couldn't recreate the issue – the expected output was displayed properly after updating and viewing the final page.

      Is there any chance you could supply a copy of the PHP code you're entering into the module?

      Also, is there any chance I'd be able to login to the site and take a look for myself? That will hopefully help me track down the issue.

      Thanks!

      Reply
      • Thanks for getting back to me right away, Dan. My problem relates to the Divi PHP Code Module as you said. The other plugin I mentioned is the Insert PHP Code Snippet by XYZ Scripts which creates a shortcode to execute PHP code. I used this to check that my PHP code was not the problem. In the website box in your Comment Form, I included a link to a sample page showing the PHP code used in the module, the resulting error message from the PHP Code Module, and the results of the successful execution of the XYZ shortcode.

        The Divi PHP Code Module executes the PHP code successfully when "Preview Changes" is used. It is only after using "Update" that the error shows. I am happy to provide you with login credentials to the site if you send me an email directly that I can respond to securely.

        Thanks for your assistance.

        Reply
        • Thanks for the details. I've just released an update (v1.0.3) which I think should address the issue you've been having. I hope it helps, but if you're still getting the same error after that, are you able to set "Enable Debugging" to "On" in the module, and let me know what message you get on the front-end after that. Thanks again!

          Reply
          • Looks like the update did the trick! My code is working now. If I have any further issues, I'll enable debugging and send you the error message. Thanks so much for dealing with this so quickly.

          • Great! Thanks for letting me know, David, and for your help tracking the issue down. Much appreciated :)

  3. Does it work easily if I want to use CLI instances instead of actual code (as in "how-to" sequences)?

    Reply
    • Hey Norman, do you mean showing the commands as you'd enter them a prompt? E.g. showing something like this (in bash): "$ cat file.txt"? If so, absolutely. There's no restriction on what you can actually enter in the module – it's just being displayed so it doesn't actually need to be valid or executable code. There's no restriction on the language entered either.

      The only place the language does matter is for the syntax highlighting. The plugin includes syntax highlighting for a variety of CLI languages (bash, powershell, etc) so hopefully there will be something that suits. The module will try to auto-detect the language being used, but you can also set it manually at:

      Code Snippet Settings > Design > Code Styling > Language

      That can be useful for very short commands where it's harder for the detection code to pick the correct language.

      I hope that answers your question, but please let me know if I've misunderstood what you are trying to do, or if there's anything I can elaborate on. Thanks!

      Reply
  4. I've just checked whether or not the new AI code writing feature in Supreme AI Writer works with Divi Code Snippet Module. It does :)

    Reply
  5. hi,

    does it have a copy / paste option (click to copy)?

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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