Code Blocks
Coding elements have been normalized and styled with only the minimum CSS to allow for consistent behaviour easy overriding.
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