How To Display CSS/HTML/PHP/Ruby Code Snippets Inside WordPress Post

If you are a blogger on wordpress, then as part of information sharing with fellow bloggers -- you would be required to occasionally share some piece of code which resolves a given problem for you and may help out other people who are encountering a similar issue. This code be anything from PHP, HTML, CSS to Ruby. Hence, it becomes important that you have an elegant way of inserting code snippets in your wordpress post, which retain/preserve the original code content and at the same time offer the reader a good visual interface using which the code snippet can be clearly highlighted and if required be copy-pasted by the visitor.

There might be a few plugins available to do this job up to some extent. However, I always prefer to hand craft the code a bit and remain independent of the plugins as much as possible. So following are a few changes that I have made on Inficone and would recommend as the steps that can be used to insert any kind of code snippets in to wordpress post.Two HTML tags that you should be familiar with in this context are are

  • <pre> -- This tag corresponds to pre-formatted text for HTML. Any piece of text within the <pre> and </pre> tags is considered to be pre-formatted and is displayed in fixed width font preserving the spaces and line breaks that were added. So this is ideal tag to use for putting in your code.
  • <code> -- Any text between <code> and </code> text is interpreted as a computer code by HTML

Now lets see how we can go about inserting code snippets in our wordpress post.

Step 1

We want our code snippet to get properly highlighted. We would also want that if the code snippet is wider then the standard post width, it should be possible for the visitor to see a horizontal scroll bar which can be scrolled to left or right to view the complete snippet. For doing the same, you can add something like the following to your style.css



#content blockquote, #content code {
  border-left: 5px #DDD solid;
  background: #F5F5F5;
  padding: 5px 0 2px 10px;
  margin: 0 0 10px 20px;
}

#content code {
        font: 12px Monaco, "Lucida Console", "Courier New", "Courier", monospace;
        display: block;
        overflow: auto;
}

This will tell the browser to use specific background for your code with the specified padding and margin. Additionally the overflow parameter tells to create the scroll bar and take care of width overflow.

Step 2

Now you are almost set to add any code in the wordpress post. However, there is a small problem. You want the snippet to be ignored by the browser HTML parser  and be displayed as is in plain text ( copy pasted code ). It can happen that the inserted snippet is parsed as HTML and the output shows a garbled result instead of showing  the desired original code. Solving this problem is not difficult. Major problem is caused by the “<” and “>” directives inside the code snippet. So rather then pasting the code with the above directives, a better way is to replace “<” by “&lt;” and “>” by “&gt;”. So for example if the code to be pasted was “<Inficone>”, then it should be converted to “&lt;Inficone&gt;” and then pasted. This prevents the HTML parsing and renders the original code snippet.

For doing the above conversion, I use the vim editor which enables to make the change very quickly. All you are required is to open vim and copy-paste the original code snippet there. Then in the escape mode, just give the following directive to global search replace “<” and “>” references in the code snippet to the desired modifiers.

Replace < by &lt;  =>           :%s/</\&lt\;/g

Replace > by &gt; =>           :%s/>/\&gt\;/g

Step 3

So now you have changed your CSS and also formatted your code as mentioned above. All you now need is to insert it in the wordpress post. The process is extremely simple if you use the wordpress editor as I do for this example.

Choose the place in your post where you want the code snippet to be inserted. Just remember the text above or below the place so that you remember the exact location and shift to HTML view.  In the HTML view, add the following syntax

<pre> <code>

Your code snippet goes here

</code></pre>

Between the pre/code tags, copy paste your formatted code snippet replacing the text “Your code snippet goes here” and then you are done.

So as you can see, it’s pretty simple to handcraft the code a bit and achieve the objective of embedding code snippets in wordpress post without the need for any plugin. If you liked the post, do share it with your friends. If you are aware of any better ways to do this, do share it with us in the comments sections. You can always submit any useful tools, web services, tips to us.





Inficone runs on the Genesis Framework

Genesis Framework
Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!
Follow On Twitter
Follow On Facebook
Follow Using RSS
Follow Using Email
Tweet This Post
Share Post On Facebook
Digg This Post
Stumble Upon

Speak Your Mind

*

This blog is kept spam free by WP-SpamFree.