Method 1:

This method starts with HTML that looks little different than the normal way authors mark up display code. Figure 1 below gives the normal markup for display code as a point of reference. 

<pre><code>function rule(ruleItem){
   return ruleItem.selector+ pairList(ruleItem.list);
}
</code></pre>
Figure 1a. In this figure the javascript function is wrapped in a <pre> element that contains a <code> element filled with plain text.

The resulting display code will look like this. 

function rule(ruleItem){
   return ruleItem.selector+ pairList(ruleItem.list);
}
Figure 1b: Normal display code —does not word wrap.

The problem with this encoding is that enlarging the code using browser zoom or reducing the viewport width can cause long lines to be truncated by the right boundary of the viewport. This forces 2-dimensional scrolling to read the code, and makes the code difficult to understand. The way to fix this is to encode the display code differently and apply a style sheet built to support word wrapping and preserve indentation. Figure 2 gives the HTML code and Figure 4 gives the CSS that will display well with reduced viewport width. 

<pre class="codBlk">
<code class="lv0">function rule(ruleItem){</code>
    <code class="lv1">return ruleItem.selector+ pairList(ruleItem.list);</code>
<code class="lv0">}</code>
Figure 2. Note that the <code> elements each start with the indentation where the code element should start. This enables reversion to pre formatting when stylesheets are not available.

The main change is to use one code element per line, and to preserve the indentation as as it appears in the normal encoding (Figure 1). The HTML in Figure 2 using the CSS in Figure 4, will yield the following display code: 

function rule(ruleItem){
    return ruleItem.selector+ pairList(ruleItem.list);
}
Figure 3: This word wraps properly for code at 400% or 1/4 viewport width. Try it out. No 2-dimensional scrolling is needed, and indentation is preserved.

In Figure 3 there are no striped lines or line numbers, but in Figure 4 there are both. The stylesheet in Figure 4 includes class values "lnNum" and "lnStripe" to enable line numbers and stripes. Note the difference between Figure 3 and Figure 4 on 400% enlargement or at 1/4 viewport width. In Figure 3 it is hard to tell if the third line is a continuation of the second line or a new line. In Figure 4 no such problem exists. See line 01 where several property settings are set in one line. Compare this to lines 04-08 where the property assignments are set one per line. There is no ambiguity with stripes. Line numbers also support line referencing. 

.codBlk {white-space: normal; font: bold 100%/1.4 Tahoma, sans-serif;}
.codBlk code {display: block; white-space: pre-wrap; position: relative;}
/* Different amounts of indent. */
.lv0 {padding-left: 0; }
.lv1 {padding-left: 2em;}
.lv2 {padding-left: 4em; }
.lv3 {padding-left: 6em; }
.lv4 {padding-left: 8em;}
/* A bit of space left and right. */
.codBlk code {
	border: solid transparent;
	border-width: 0.125em 0.25em;}
/* Make a wider border to put the line numbers in. */
.codBlk.lnNum code {
    border-left-width: 2.25em;
    counter-increment: lnNum}
.codBlk.lnNum code::before {
    content: counter(lnNum, decimal-leading-zero);
    position: absolute; top: 0; left: -2em;
    font-weight: normal}
/* Normal background and striped background. */
.codBlk code {
    background-color: #DDD;
    color: #1A1A1A}
.codBlk.lnStripe code:nth-child(even) {
    background-color: #BFBFBF;
    color: #0D0D0D}
Figure 4: The CSS used to format display code for proper formatting up to 400%.

This HTML / CSS combination really illustrates the difference between, content and presentation. Without a stylesheet the code in Figure 2 and Figure 3 will display the same way. The CSS of Figure 4 ignores the actual white space in the <pre> element (class="codBlk") by setting white-space: normal; in line 01. It accomplishes indentation using CSS positioning and padding. Line numbers are placed in the left border. All of this positioning and number requires no HTML content. This looks very good, but it has one problem. When you select and copy display code from the web page, the indentation is lost. See Figure 5.

When you select and copy code from this presentation the only content that is copied is the content that is presented. The white space used for indentation in the HTML has been squeezed away by the white-space:normal; assignment. The indentation you see is not HTML content. It is just left padding. Thus, if you copy the code of Figure 3 and pasted it into an editor, the indentation will be removed. 

function rule(ruleItem){
return ruleItem.selector+ pairList(ruleItem.list);
}
Figure 5: This figure show how code looks when it is pasted into a code editor.

This problem can be fixed but it requires considerably more work from the author.