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
doneC/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 herePHP
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
endPowerful 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.
Hi,
I want to insert a code snippet inside the Divi Tab module. Is that possible?
Hi Timo, the Divi Tab module doesn't itself support embedding other modules into it, but it does allow shortcodes. This means you should be able to do it like so:
1) Add a code snippet module to a page (possibly a private page) and set it up how you want it to appear.
2) Save your code snippet module to the Divi library
3) Use the free Shortcodes for Divi plugin to generate a shortcode for that library item
4) Place the shortcode in the content of one of the Divi Tab module's tabs.
Now the code snippet module should be displayed on that tab.
I hope that helps, but give me a shout if you have any further questions about it. Thanks!
v1.3.8 adds support for YAML and Jinja.
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.
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!
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.
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!
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 :)
Does it work easily if I want to use CLI instances instead of actual code (as in "how-to" sequences)?
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!
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 :)
hi,
does it have a copy / paste option (click to copy)?
Hi Maud, yes, it does. This post explains how to enable the click to copy button in the code snippet module. I hope that helps!