Inline Code

Wrap your inline code in a <code></code> block to highlight a fragment of computer code.

Use the samp. <samp></samp> element to present sample output from a computer or operating system. Keyboard input or voice commands can be displayed using the <kbd></kbd> element for example: press shift + f5

Pre Blocks

Wrap your block sample in a <pre></pre> block.

This is the Panel constructor:

function Panel(element, canClose, closeHandler) {
  this.element = element;
  this.canClose = canClose;
  this.closeHandler = function () { 
    
    if (closeHandler) {
    
        closeHandler(); 
    }
  };
}

Nested Inline Code

In the following snippet, samp and kbd elements are mixed in the contents of a pre element to show a session of Zork I.

You are in an open field west of a big white house with 
a boarded front door.
There is a small mailbox here.
> open mailbox
Opening the mailbox reveals:
A leaflet.
>

Fixed Height

Add the class .pre-scrollable. to constrain pre blocks to a fixed height.

pre, code, samp, kbd {
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8;
    color: #dd1144;
    padding: .5em;
}
code {
    padding: .067em .25em;
    white-space: nowrap;
}
pre code,
pre samp {
    border: none;
    padding: 0;
    white-space: pre-wrap;
}
.pre-scrollable {
    max-height: 20em;
    overflow-y: scroll;
}

Positioning

The following shows a contemporary poem that uses the pre element to preserve its unusual formatting, which forms an intrinsic part of the poem itself.

                maxling
it is with a          heart
               heavy
that i admit loss of a feline
        so           loved
a friend lost to the
        unknown
                                (night)
~cdr 11dec07