How to Add Syntax Highlighting in WordPress | EP 647

How to Add Syntax Highlighting in WordPress

1. Syntax Highlighting 00:59
2. “This is a body, this is a head” 02:24
3. Code Snippet 03:23

Read the full episode transcript below:

00:25 David Blackmon: Hey everybody. Welcome to another episode of WP The Podcast brought to you by WP Gears. I’m David Blackmon.

00:35 Tim Strifler: And I’m Tim Strifler.

00:37 David Blackmon: Today in episode 647 we’re going to talk about how to add syntax highlighting in WordPress. You may wonder how sometimes code gets put into a WordPress website and it just looks different, it’s got a different color, it actually looks like code and stuff.. Well there’s a simple way to do that we’re going to tell you how to do that today. Tim?

00:59 Tim Strifler: Yeah, so let me quickly explain syntax highlighting and why you want it. So if you just look at a block of code and it’s all the same color it’s really hard to read, but what syntax highlighting does is it changes the colors for the different things. So for example if you just have basic html well they’re going to put the html tags in one color and then the other things that you’re writing in between will be black and then that’s like the most basic example . And so the more complicated the coding language the more different colors are going to be used and for it really just makes it easier on the eyes to read, and so if you’re if you’ve looked at tutorials on on WordPress before, and they you know, give you
some examples of something to add to your functions.php file and it like it looks really good it’s well formatted, well that’s syntax highlighting. And so um you might wonder how to get that onto your site as David mentioned and so there’s a couple there’s, I mean there’s a lot of different ways. The plug-in that we recommend using is called Syntax Highlighter and it is a really powerful plug-in. It’s actually they’ve changed the name to Syntax Highlighter Evolved, because they’ve added a lot of stuff and so if you’re using Gutenberg it comes with a Gutenberg block but if you’re not using Gutenberg then that’s okay, you don’t have to use it. So it’s very very simple very easy to use. And uh that’s how you do it anything to add to that David?

02:24 David Blackmon: No it’s uh you know a lot of people think you gotta use code to highlight code and stuff and there are many different ways like Tim said, but this is probably the simplest most easiest way to add syntax highlighting to your WordPress website. I guess my only question would be why would someone want to do that, and you kind of answered it which is, you know, when someone comes to the website a lot of tutorials like Tim and I will do tutorials on our websites Divi life and Divi Space, and we’ll do a lot of Divi tutorials and stuff where we’ll give away free code and stuff, to teach people how to do this, and this is when these types  of plugins or this type of syntax highlighting comes in handy because as you’re learning, at least for me, it was helpful to know “this is a body”, “this is a head”. This is a you know and and having that highlighted out in that code and stuff allows me to, you know, target what I want if I want to make some edits or changes and stuff to it so
I hope that made sense.

03:23 Tim Strifler: Yeah and so I use, the David and I both use Divi. Uh we’re big Divi people and so I actually use a Divi module. And so it’s actually it’s from Divibooster.com a module called Code Snippet module and basically it’s a Divi module that allows you to pop in your code and then it allows you to customize. They have different color schemes built in and so you can choose one that kind of matches the site and  everything. And so that’s what I use and I love it! It works great I’ve used it for years now but if you’re not using a page builder or using different page builder then the plugin we mentioned is free it’s been around a long time has 40 000 active installations four and a half stars, can’t go wrong with the Syntax Highlighter Evolved plug-in.

04:05 David Blackmon: Well tomorrow we’ve got another great topic for you. We are going to talk about how to use header tags properly for effective SEO. Tim until tomorrow we’ll see you then.

04:22 Tim Strifler: Take care bye-bye.