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