Code Boxes with <pre> and CSS

First published on 2006-02-07, updated on 2008-07-09.

CSS enables text wrapping in code samples whilst keeping the whitespace intact.

This article has samples of code for creating code samples. Pretty confusing, so take it slowly.

Plan for Making

Start by choosing the correct elements:

You style this afterwards, with CSS.

Source Code

Here is the markup used by the above bullet list: 

<ul>
 <li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code>&lt;code></code> element</a>.
 <li>Block-level samples of text where whitespace is signficant use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-PRE">the <code>&lt;pre></code> element</a>.
 <li>So a block of code with significant whitespace uses <code>&lt;pre>&lt;code></code>.
</ul>

If you copy and paste that into a web page, it will display like normal content:

Fine. But how do you make it display as a code sample?

Code Sample

Escaping the tags and entities stops the code being displayed as content:

  1. Change each < in the sample to &lt;. Leave > alone.
  2. Change each & in the sample to &amp;.
  3. Put <pre><code> before the sample.
  4. Put </pre></code> after the sample.
  5. No new lines immediately after <pre><code>.
  6. No new lines immediately before </pre></code>.

Step 1 escapes the tags. Step 2 escapes the entities. Steps 3 and 4 let CSS style the sample. Steps 5 and 6 let CSS control all spacing.

The resulting markup for the code sample is this: 

<pre class="markup">&lt;ul>
 &lt;li>Inline code samples use &lt;a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the &lt;code>&amp;lt;code>&lt;/code> element&lt;/a>.
 &lt;li>Block-level samples of text where whitespace is signficant use &lt;a href="http://www.w3.org/TR/html4/struct/text.html#edef-PRE">the &lt;code>&amp;lt;pre>&lt;/code> element&lt;/a>.
 &lt;li>So a block of code with significant whitespace uses &lt;code>&lt;pre>&lt;code>&lt;/code>.
&lt;/ul></pre>

Looks really messy, doesn’t it? But if you copy and paste that into a web page, it will display a basic code sample: 

<ul>
 <li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code>&lt;code></code> element</a>.
 <li>Block-level samples of text where whitespace is signficant use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-PRE">the <code>&lt;pre></code> element</a>.
 <li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>

That’s nice. But the long lines overflow the box for the sample, causing horizontal scrolling.

Line Wrapping Code Samples

We can control line wrapping with CSS2.1, which also keeps whitespace intact: 

/* Code Samples */
pre {
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;
}

Applying it to the sample displays this: 

<ul>
 <li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code>&lt;code></code> element</a>.
 <li>Block-level samples of text where whitespace is signficant use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-PRE">the <code>&lt;pre></code> element</a>.
 <li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>

Cool! It looks rather plain, though.

Style

Code samples should look better with some CSS for spacing, a border and a background colour: 

/* Code Samples */
pre {
 white-space: pre-wrap;
 white-space: -moz-pre-wrap;
 white-space: -o-pre-wrap;
 background: #faf8f0;
}
#content #pre-stylish code {
 display: block;
 padding: 0.5em 1em;
 border: 1px solid #bebab0;
}

The sample is now displayed like this: 

<ul>
 <li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code>&lt;code></code> element</a>.
 <li>Block-level samples of text where whitespace is signficant use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-PRE">the <code>&lt;pre></code> element</a>.
 <li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>

Finished! You can adjust the CSS to suit your own pages.

Recommendations