Automatic horizontal scrollbars in Wordpress <code> blocks

Since wrapped lines of code in Wordpress’ <code> blocks are obnoxious, here’s how to make them automagically appear when you run past the end of a line, instead of wrapping and confuzzling things.

Edit your theme’s style.css file. Find the block that starts:

#content code {
   ...
}

Inside the braces, add a line somewhere that reads:

overflow: auto;

For example, this part of my style.css file now reads:

#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;
}

Now go back through the HTML of one of your postings and nest all <code></code> blocks inside <pre></pre> blocks. E.g., where you once had something like:

<code>$ example</code>

You will now have something like this:

<pre><code>$ example</code></pre>

That’s all!

MAGIC 8O

November 12, 2008 • Posted in: Linux

One Response to “Automatic horizontal scrollbars in Wordpress <code> blocks”

  1. Add scrollbars in Wordpress blocks | My TechLife - September 10th, 2009

    [...] Tip from Blither. [...]

Leave a Reply

You must be logged in to post a comment.