If you offer any software or programming tip, you'll definitely want to share code snippets. This way of sharing code snippets can help them set up a practice quickly. However, sharing code with all the necessary formatting is not possible by default. What I mean by formatting is syntax highlighting. Still, it's something quite easy to do.
Fortunately, if you use divi, you should know that there is a built-in way to do this manually, in order to add custom styles to these code snippets. Additionally, there are plugins and resources third-party apps that can really simplify the process of creating aesthetically pleasing and functional snippets in Divi.
In this tutorial, I'll show you how to share code snippets in Divi (manually). And I will also show you how to design snippet blocks with Divi Builder, which will take you to the next level.
Preview
Here's an overview of the snippet designs possible in this tutorial.
The Code Snippet Boxes with code snippets added manual mode.
Prerequisites for the tutorial
For this tutorial, all you need is the Divi theme, installed and active. We will build the sample code snippets from scratch using the Divi Builder on a new page.
To get started, create a new page and deploy Divi Builder on the public interface. Then choose the "Build from scratch" option.
Now you are ready to go!
Design of a personalized box for code snippets on Divi
Since our code snippet resides in a text module, we can use the divi builder to add design elements into the text module (and around it). For this design, we'll use a summary module to serve as a label for the snippet. Next, we'll style and position the cursor to the left of the text module. Next, we'll style the text module of our snippet.
Creating the section, row, and column
We must first create a new section with a row of a column.
Then update the line parameters as follows:
Gutter width: 1
Custom padding: 0px at the top, 0px at the bottom
Add the text module
Then add a text module to the line.
You can leave the contents by default. We'll add our WordPress code snippets to it later. For now, let's model the text module by updating the following text parameters:
Background color: # eff0f1 Text color: # 000000 Custom margin: 60px left Custom padding: 3% top, 3% bottom, 3% left, 3% right
Top border width: 10px Top border color: # 7cda24
Creating the snippet label
To create the snippet label, we'll use a blurb module. This will allow you to add a blurb text icon (or custom image icon) next to the displayed code language.
Create a presentation module and drag it above the text module. Then update the following presentation settings:
Title: css Content: [remove fictitious content] Use icon: YES Icon: see screenshot
Then update the design parameters as follows:
Background Color: # 1b2426 Icon Color: # 7cda24 Image / Icon Location: left Font Size: 20px Text Title Color: #ffffff Text Size Title: 16px
Title Line Height: 1.3em Width: 100px Custom Margin: -44px Bottom, -50px Left Custom Padding: 10px Top, 2px Bottom, 15px Left, 15px Right
Duplicate section to create more snippet box designs
This supports our first code box design. Now we just have to duplicate the section containing the code block design and update the label and colors to create a new code block for a different encoding language. This is of course optional, but if you plan to add different snippets to a page, it helps to have a different color scheme for each.
For example, duplicate the section, and open the Blurb module settings.
Update the title to "js" for Javascript.
Then right-click on Image / Icon Color and select Find and Replace.
Updated search and replacement options:
In: this section Replace with: [new color] Replace all: check replace all values ​​found
You now have a new snippets block for JS snippets.
Here is an example of snippet boxes for popular code types for WordPress.
Using the Prettify Code plugin to add syntax highlighting to manual code snippets
Well, it is true that with the manual method, you can immediately paste text and pass. The Prettify Code plugin will instantly add highlighted code to all "pre" tags. The beauty of this plugin is that there is absolutely no customization required. All you have to do is download and activate the plugin.
Here's an example of what the code will look like with Active Prettify Code.
Code Prettify comes of Google and is also used to stylize all those wonderful snippets on stackoverflow.com.
To finish
Viewing code snippets on Divi doesn't have to be difficult. Adding the snippets manually using the pre and Word code tags provided by WordPress will do the job for most non-html snippets, but you need to run the snippet through an encoder first. html to be sure. Additionally, you can further customize the snippet text style using the text module settings. And don't forget Code Prettify to add highlight to your manual snippets.
For those of you who regularly share snippets, using the SyntaxHighlighter plugin is probably your best bet. Either way, you will always have the option to add more creative designs to your snippets using Divi Builder.
Bonne chance.
