How to Increase the Font Size on the WordPress Plugin Enlighter?

by
5/5 - (1 vote)

Do you use the awesome WordPress plugin “Enlighter” to embed code in your WordPress site like this?

print('hello world!')

If you’re like me, you want to be able to customize the style (such as font size) globally—not locally for each individual code snippet.

Problem: How to increase the font size of the Enlighter WordPress plugin?

To increase the font size globally, you need to complete the following steps:

✔️ Open your WordPress editor.
✔️ Go to Appearance > Customize > CSS in your WordPress editor.
✔️ Copy the following snippet into your CSS file:

.enlighter-t-bootstrap4 .enlighter span{
font-size: 16px;
}

Note that you can change the font-size to 15px, 17px, or even 20px—as you like! Also note that if you use another theme/style for your embedded code than bootstrap4, you need to set the CSS selector accordingly.

For example:

.enlighter-t-wpcustom .enlighter span{
font-size: 20px;
}

This would change the font size of all Enlighter code environments that use the custom theme.

You can check the theme you’re using in your blog by right-clicking and inspect the code in the page HTML similar to my Firefox here:

Here’s how this may look in practice:

Enlighter change font size WordPress blog

Ah, yes—if you want to learn Python, don’t forget to download our free cheat sheets: 🙂