Displaying code in WordPress and how to find your best plug ins

While writing up my Photon troubles blog post, I encountered the issue of displaying a code snippet in a wordpres-driven site.

Googling this issue I’ve found that there are, in fact, many wordpress plug-ins available for resolving this issue and that there is also some code-display support integrated in WordPress itself.

WordPress integrated support for code display

WordPress allows for code display by wrapping the code you want displayed in <pre> or <code> tags. These tags have been specifically developed for code display and should allow for appropriate syntax highlighting for the language of choice.The difference between them is that the <pre> tags will display your code in a separate line, while the <code> tags allow for the code to remain inline with text.

The ugly white tags in the paragraph above have been created by the means of <code> tags. And if I wrap my code from the Photon troubles blog post in <pre></pre> tags, the result should be as follows:

apply_filters ( 'jetpack_photon_reject_https', true );

Now this is… seriously ugly, specially within the visual design I’m using for this web site. Thankfully the tags can be styled, ie I could go to my CSS stylesheet (or the Additonal CSS in my WordPress theme editor) and go something like:

code {font-size:1.2em; 
	color: #008099}

But this is still, for my taste, far from optimal. While I could cope with required CSS changes should I change the theme, I really don’t want to deal with how ugly the code for my actual post looks like in the Text editor with all the tags and the mess.I dread what it would all look like if I were to create a serious post with some serious code.And seriously, I’m new school and I love me the WYSIWYG editor. In short, I’d settle for this only and only if I knew I am going to write code in my posts on a very, very seldom basis.

However if this feels like just what the doctor ordered, I suggest you check out the official WordPress docs on the subject to get a more through feel of the matter before actually using it in your blog.

Inserting code into your posts using WordPress plug – ins

Thankfully, we are not restricted to the above: the web offers tons of wordpress plug ins that resolve this issue with more or less success and hassle.

The abundance of plug ins is, in my eyes, one of the biggest blessings and, at the same time, one of the biggest curses of Word press: it’s easy to find what you need, but picking the one that works well, fulfills all your needs, doesn’t break your site and doesn’t require 4 hours to set up is more of a lottery: how much guesses will it take? And where do I even begin?

For a place to start searching, I like lists like 15 WordPress Plugins for Displaying Code Snippets where you can not only find a selection of… hopefully well selected plug-ins, but also scan through user comments below and see what gets praise, and what triggered a user to throw a hissy kitty in the comment section.

For me, the search resulted in finding the WordPress Synthax Highlighter Evolved plug in which allows for wrapping of code in a pair of simple short code tags in the WYSIWG editor. Ie, for my php code all you have to do is write the code between shortcode tags containing the word php in the WYSIWYG editor and voila:

apply_filters ( 'jetpack_photon_reject_https', true );

It also allows for simple adjustments to the code look and display in the plug-in Settings area, as it comes integrated with several available themes and code display options. The only obvious problem I’ve found is the skipping of the code below the 1st line, like this:

And for now, I’ve resolved it by reverting to the 2.x version of the plug in (easily accessible from the plug in settings console).

To learn more about this plug in and whether it’s good for you, check out the How to Easily Display Code on Your WordPress Site blog.

Leave a Reply

Your email address will not be published. Required fields are marked *