Code Boxes with <pre> and CSS
CSS enables text wrapping in code samples whilst keeping the whitespace intact.
Plan for Making
Start by choosing the correct elements:
- Inline code samples use the
<code>element. - Block-level samples of text where whitespace is signficant use the
<code>element. - So a block of code with significant whitespace uses
<pre><code>.
You style this afterwards, with CSS.
HTML for Code Samples
Using the preceeding section as an HTML sample, you’d paste this into your page:
<pre><code><h2 id="block">Block of Code</h2>
<p>Start by choosing the correct elements:
<ul>
<li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code><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><code></code> element</a>.
<li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>
<p>We style this with <acronym title="Cascading Style Sheet">CSS</acronym> afterwards.</code></pre>The important steps to this are:
- Change each
<in the sample to<. - Put
<pre><code>before the sample. - No new lines immediately after
<pre><code>. - Put
</pre></code>after the sample. - No new lines immediately before
</pre></code>.
Step 1 prevents the sample being parsed as HTML. Steps 2 and 4 let CSS control all spacing.
Without CSS, that markup looks like this:
<h2 id="block">Block of Code</h2>
<p>Start by choosing the correct elements:
<ul>
<li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code><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><code></code> element</a>.
<li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>
<p>We style this with <acronym title="Cascading Style Sheet">CSS</acronym> afterwards.The long lines of code overflow the box. They can cause horizontal scrolling of the page. Not what you want.
Controlling <pre>
Whitespace and word wrap is controlled by the white-space property from CSS2.1. The default for <pre> is white-space: pre; which is specified to do this:
- pre
- This value prevents user agents from collapsing sequences of whitespace. Lines are only broken at newlines in the source, or at occurrences of
\Ain generated content.
This is why all your whitespace is preserved and there is no word wrap in <pre> elements.
CSS2.1 also specifies white-space: pre-wrap; which differs slightly:
- pre-wrap
- This value prevents user agents from collapsing sequences of whitespace. Lines are broken at newlines in the source, at occurrences of
\Ain generated content, and as necessary to fill line boxes.
Whitespace is preserved but word wrap is now enabled “as necessary to fill line boxes”.
CSS for <pre> with Word Wrap
/* Code Samples */
pre {
white-space: pre-wrap;
}The result is this:
<h2 id="block">Block of Code</h2>
<p>Start by choosing the correct elements:
<ul>
<li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code><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><code></code> element</a>.
<li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>
<p>We style this with <acronym title="Cascading Style Sheet">CSS</acronym> afterwards.The lines do wrap in Firefox 2 or Opera 9. The lines do wrap in IE6 and IE8b1.
Extended CSS for <pre> with Word Wrap
/* Code Samples */
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -o-pre-wrap; /* Opera 7+ */
}These are vendor extensions. The result of using them is this:
<h2 id="block">Block of Code</h2>
<p>Start by choosing the correct elements:
<ul>
<li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code><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><code></code> element</a>.
<li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>
<p>We style this with <acronym title="Cascading Style Sheet">CSS</acronym> afterwards.The text wraps in all 4 of the browsers listed above.
Stylish CSS (Finally!)
Decorate the sample with border, padding and background:
/* Stylish CSS */
#content #pre-stylish {
margin: 0 28% 1em 0; /* Restore gutter */
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 finished, stylish sample with whitespace and word wrap:
<h2 id="block">Block of Code</h2>
<p>Start by choosing the correct elements:
<ul>
<li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code><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><code></code> element</a>.
<li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>
<p>We style this with <acronym title="Cascading Style Sheet">CSS</acronym> afterwards.Syntax Highlit Samples
Colouring and styling the contents of samples can greatly improve their readability:
<h2 id="block">Block of Code</h2>
<p>Start by choosing the correct elements:
<ul>
<li>Inline code samples use <a href="http://www.w3.org/TR/html4/struct/text.html#edef-CODE">the <code><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><pre></code> element</a>.
<li>So a block of code with significant whitespace uses <code><pre><code></code>.
</ul>
<p>We style this with <acronym title="Cascading Style Sheet">CSS</acronym> afterwards.A separate article will cover this. A link to it will appear here.
Recommendations
- Use
<pre><code>for blocks of code. - Use
white-spaceto control whitespace and word wrapping. - Use vendor extensions to CSS until
pre-wrapis supported.
