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).