Display Code Snippets in WordPress Without Using Plugin

If you have been a regular reader of this blog then you would have read my post on “displaying code snippets in WordPress posts”. I explained it using a plugin. These days I am focusing on making things happen without any plugin. So again I am invoking this topic but this time we will take different route to achieve similar goal.

Most of the programming blogs authors write code in their blog posts. Sometimes browsers interpret those code blocks and as a result they it may end up displaying something weird. Let’s learn how we can display code in posts properly without using any plugin. It would be really beneficial for those who rarely write codes in their  blog. It will improve page load time by avoiding any extra plugin for displaying code correctly.

WordPress has <pre> and <code> tags which can be used to make your code look different from normal text.  Further you can style these tags and make your code block look prettier.

 While using <pre> and <code> tag you may face various problems because even if your code is wrapped inside <pre> and <code> tags, few characters like “<” and “>” are interpreted as code tags which overall effects whole code block.

Note: Remember to replace  “<”  by  “&lt;” and  “>”  by  “&gt;”

TIP: Use this application  “Postable” . Just paste your code and you will get it in a format that will be easily interpreted as normal text by browsers.

For example let’s suppose I have to display code

<?php echo “Hello WordPress”; ?>

in my post then I will have to write:

<pre><code>

&lt;? php echo "Hello WordPress"; ?&gt;

</code></pre>

 When I posted this in WordPress, it resulted into something like this:

We are able to show code in our WordPress post. Now its time to make it something more pleasing. Go to theme editor and open style.css. In style.css file you can define your own style to <pre> and <code> tags. for example I used this style code:

pre {border: solid 1px blue;
    font-size: 1.3 em;
     color: blue;
    margin: 10px;
    padding:10px;
    background: #FFFFB3}
code {font-size:1.2em;
    color: #008099}

You can paste this code anywhere in your style sheet. But I recommend to paste it without effecting flow of code in your style.css.

save style.css and then my code block looks like this:

Conclusion:

You can add your own custom CSS and make it look your way. You are not using any plugin :). If you want to highlight your code and use some funky display option then you can go for plugin because plugin will save your time and efforts. Also if you have to write code in almost your all posts then go for a plugin because your time is more precious.