IT Blog,

How to Add Code Snippets to your WordPress Posts

3 m read
QArea Expert
QArea Expert Marketing Manager
October 16, 2014
Share on
Reading Time: 3 minutes

Are you a programmer or website developer? If yes, you might want to share the code snippet to your WordPress posts. Perhaps you are showing a social ranking algorithm written in Python. Maybe you are demonstrating an HTML idiom. You could even be writing something as unusual as a PHP or WordPress tutorial! In any one of these cases, you want an easy way to display the code.

Of course, there is one very simple way. Just paste it into the visual editor (not the HTML editor) and it will do any necessary conversion of angle brackets, ampersands, etc. into HTML entities. If WordPress thinks it is HTML code, it will even wrap it in pre tags for you. Observe:

<div id="search">
 <form id="searchform" method="GET" action="/index.php">
 <input type="text" name="s" id="s" size="16" class="inputtext" />
 <input type="submit" value="Search" class="button" />
 </form>
 </div>

It works, but it isn’t the prettiest thing in the world. Now, you could go in and mark tag names in one color and attributes in another and plain text in a third and so. And you could do similar things for code snippets in other languages. You could do that, but it would painful. Luckily, you don’t have to thanks to something called GesHi. GeSHi stands for Generic Syntax Highlighter and it turns code into nicely styled HTML. Sweet.

Here is the same HTML block styled by GeSHi:

<div id="search">
   <form id="searchform" method="GET" action="/index.php">
     <input type="text" name="s" id="s" size="16"  class="inputtext" />
     <input type="submit" value="Search" class="button" />
   </form>
 </div>

There are several WordPress plugins that use GeSHi to format code snippets and I tried out three of them yesterday: CodeColored, Highlight Source Pro, and WP-Syntax.

They all work in about the same way. You put your code into your post, wrap it with special tags or shortcode, and let the magic happen. CodeColorer has the advantage when it comes to user-friendliness. Most of its options are set from a settings page in the admin interface, while the others depend on arguments on the wrapper tags. These include things such as width of the snippet block, maximum length of the block, whether to use scroll bars if the code is longer than that, etc. The settings page also lets you pick from a set of predefined color themes, which is convenient.

Highlight Source Pro takes almost the opposite tack. It has very few options (pretty much “do you want line numbers?”), they are barely documented, and they must be done inline as arguments to the wrapper tag. By any metric, CodeColorer has it beat petty handily. WP-Syntax is similar to Highlight Source Pro in terms of extras, but at least the features it has are clearly document complete with examples.

If this sounds like it was an easy victory for CodeColorer, it almost wasn’t. There was one problem; I could not get the indenting to work. For some reason, both CodeColorer and Highlight Source Pro blew away my indenting, leaving all my code slammed to the left. Only WP-Syntax behaved itself and left my code the way I wrote it. This is a make-or-break feature in my mind, so I resigned myself to using WP-Syntax.

Looking into it more closely today, I noticed that the indenting did work when I looked at it in Safari. Most of my readers use Firefox, so this didn’t solve anything, but it did lead me to the solution. It turns out that the indenting was fine all along, but a GreesMonkey script was killing it. Basically, the indenting was fine for everyone except for me in Firefox on this one machine.

In any case, I am using CodeColorer and am pretty pleased with it. For most snippets, I just wrap them with cc shortcode, providing the language of the code with the lang argument (e.g. [cc lang=”php”&93;). You do need to use the HTML editor instead of the visual editor, but switch between them is pretty easy (just click the appropriate tab).

If you need to show code snippets, give CodeColorer a look.


Web Development Services


Categories

Recent Posts

  • Best Frontend Programming Languages to Create Beautiful and Fast Interfaces

    Read more
  • Capability Maturity Model Integration – QArea's big journey

    Read more
  • QArea is a Unique Services Provider in 2019 CEE Awards

    Read more
  • Ultimate Development Trends in 2018 to Reward Your Business in 2019

    Read more
  • Why You Should Write Your Next Microservice Using Golang

    Read more
  • The Most In-Demand Backend Programming Languages of 2019

    Read more
Yes
Tags
Share on
Privacy Preference Center
Your Privacy

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

Strictly Necessary Cookies Always Active

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms.

You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.

Performance Cookies

These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.

Cookies used

Google Analytics
Functional Cookies

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

Cookies used

Test Second Test
Targeting Cookies

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

More Information

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.