Scrolling Preformatted Code Examples

I was adding more examples to the Movable Type Documentation site today and my lines of code were so long that they went beyond the width of the column… so I implemented some css to use a scrollbar to display longer lines. Shorter lines display without the scrollbar.

Examples (and HTML source)

Short code renders no scroll bar…

<pre><code>short code example</code></pre>

Long code renders scroll bar…

<pre><code>long code example (is it odd that the word "short" is longer that the word "long") long code example long code example</code></pre>

CSS Code

pre {
    overflow: auto;
    width: auto;
    background-color: #f0f6fa;
    border: 1px solid #CCCCCC;
    border-width: 1px 0;
    padding: 10px;
}

• overflow: auto; - creates the scrollbar if content is wider than container.
• `width: auto; - .
• <pre> “preformatted” — all the spaces and carriage returns are rendered exactly as you type them. All other formating (links, code, etc) are preserved.
• <code> tag renders in mono-spaced font.