Why use WordPress Pre and Code tags
Blogs that show code in the posts should provide a distinction between the text and code. This helps visitors identify code easily and copy it for their use.
Options for using Pre and Code tags
With WordPress, differentiating between code and regular text becomes quite simple. This can be achieved via two options.
First option would be to install a plugin while second is to make a code change. There are many plug-ins available for example auto-syntaxhighlighter. However if you are like me, you would want to avoid plugins if you can and achieve the same result with some minor HTML code changes. After all, plug-ins are not always up to date with latest WordPress version, especially if they are free.
How to use Pre tag
In order to use Pre and Code tags, first select the relevant text from the visual editor and make it preformatted. This basically directs the browser to show the text as is without any changes to it’s format.
This should show text like this.
[Your code]
How to create scrollbar for Pre tag
One of the issues faced here is that if the code line is quite long it does not produce a scrolling bar. In order to create a scroll bar do following:
1. Open your theme’s style sheet called style.css.
2. Find the pre tag. It looks something like this:
pre{margin-bottom:1.3em;background:#eee;border:0.1em solid #ddd;padding:1.5em;overflow:auto;}
If you cannot locate it then you can just copy it from above and paste it. But if it exists already make sure that “overflow:auto;” is part of the definition because that provides scrolling bars when a preformatted text line is too long.
How to use Code tag
Now final part is adding code tags. Code tags changes the font to make the code text look more like a text on a unix terminal. In order to do that go to HTML tab on your visual editor of WordPress and add <code> tag after <pre> tag and then </code> tag before </pre> tag. This would make your code look like this:
[Your code]
Add Code tag to CSS
If you do not notice any difference then you are probably missing code tag definition in your style.css. In that case put this line in your style.css
code{font:1.1em Monaco,monospace;overflow:auto;}
That is it. You should now be able to use WordPress pre and code tags effectively.
