Code Responsive, normalized code blocks.


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 con in a <code></code> block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.

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.

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