We all use the <code> tag to post code snipplets in the posts. But when the width of the code often breaks wordpress styles. The solution would be adding horizontal scrollbars in the <code> blocks. A bit of searching solved the problem!
So what you need to do is edit the style.css of your current theme. This file, as you know, is located in the path domain.com/wp-content/themes/<themename>/style.css. So open this file in a text editor and look for the code section.
It often looks like this:
#content code {
...
}
or
code {
...
}
In my current theme it looks like this:
code {
background: #afafaf;
cursor: text;
font-family: "Courier New", Courier, monospace;
}
Just add the following to the bottom of the code definitions before the }.
overflow: auto;
so now my code will look like this:
code {
background: #afafaf;
cursor: text;
font-family: "Courier New", Courier, monospace;
overflow: auto;
}
Save the file and upload it to your server.
All set, now while posting a code snippet just wrap it with <pre> </pre> tags along with <code> </code>tags. You will need to switch to the html view to do this. Example:
<pre><code>
#include
main()
{
printf("Hello World!.\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n");
}
</code></pre>Tip from Blither.
