WordPress pre and code tags Create pre code tags scrollbar with CSS

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.

Wordpress pre and code tags Create pre code tags scrollbar with CSS

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.

Related Posts