Add Code To Your Posts – SyntaxHighlighter Evolved WordPress Plugin

Share

SyntaxHighlighter-Evolved

Have you ever wanted to display some code in your blog posts but didn’t know how?  HTML, CSS, php, etc. can look a bit messy if not formatted to look different from the rest of your post, which is why we use the SyntaxHighlighter Evolved plugin on our site when needed.

Why Would You Need To Include Code In Your Posts?

Admittedly, not everyone will need to include code in their posts; it is more useful for sites that talk about web design and coding (like ours does now and again).

There will be times that you want to include certain coding information, whether it’s a short single line of code or a full page for people to use.  This is particularly useful when writing tutorials or trying to explain something.

Now, instead of simply adding the (let’s say HTML) code to your post as you would any other text, it can be good to format it so that it stands out.  You also need to consider the fact that many people may want to copy & paste that code so they can use it themselves.  Any way you can make it easy for them to do that is good for your site.    This is where the SyntaxHighlighter Evolved Plugin comes in.

What Does The SyntaxHighlighter Evolved Plugin Do?

Developed by Alex Mills (AKA – Viper007Bond) who is part of the Automatic team (the guys behind WordPress.com and other great online projects), the SyntaxHighlighter Evolved plugin allows you to easily highlight code on your site.

For example, let’s say that I want to write a simple tutorial about how to add a clickable image to your WordPress sidebar.  In order to let people know, I would need to give them a sample code that they can use on their own site.  Now I can either display it like this…

<a href=”http://WEBSITE LINK HERE”><img src=”http://IMAGE LINK HERE”/></a>

…or I can display it like this with the SyntaxHighlighter Evolved plugin.

<a href="http://WEBSITE LINK HERE"><img src="http://IMAGE LINK HERE"/></a> 

Both codes are exactly the same, though I think you can see why the second one is better to use.  Not only does it make it stand out from the rest of your post, but people can copy it much easier for their own use.  This is even more prevalent when you need to include long pieces of code in your posts.

See how we have used the plugin over on our Do Follow vs No Follow Links and Google Authorship Guide posts.

Do you use this plugin?  Do you use a different plugin for the same purpose?  Please let us know by leaving a comment below.

About Matt Smith

Matt Smith is the founder and editor of OnlineIncomeTeacher. He is a Professional Blogger, SEO Consultant & Web Developer, running a number of sites from the UK. Connect with him on Twitter, Facebook, Google+ and LinkedIn.

  • Guest

    Nice posts Matt. Have just installed this and can’t seem to get it to work. I have added the code, but nothing happens. Am I doing something wrong?

    • http://onlineincometeacher.com/ Matt Smith

      Ah, you need to add the right markup before and after your code in order for the plugin to see it. Add it like this…

      YOUR CODE HERE

      The tags are vital for it to work. Had the exact same issue when I first installed it.

      • Guest

        That worked perfectly!!!!!! :)

        • http://onlineincometeacher.com/ Matt Smith

          That’s great! Just remember to add that each time to want to include any code.