Code

Inline Code

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

This is the Panel constructor:

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

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: .13em .25em;
}
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;
}

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

<div id="carousel-2" class="carousel" data-carousel-mode="fade" data-carousel-interval="5000">
    <!-- Carousel Indicators-->
    <ol>
        <li data-carousel-target="#carousel-2" data-carousel-slide-to="0" class="active"></li>
        <li data-carousel-target="#carousel-2" data-carousel-slide-to="1"></li>
        <li data-carousel-target="#carousel-2" data-carousel-slide-to="2"></li>
    </ol>
    <!-- Carousel Items-->
    <figure class="carousel-active">
        <img src="../assets/img/hydrangeas.jpg" alt="hydrangeas">
        <figcaption>
            <h4>First Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
        </figcaption>
    </figure>
    <figure>
        <img src="../assets/img/chrysanthemum.jpg" alt="chrysanthemum">
        <figcaption>
            <h4>Second Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
        </figcaption>
    </figure>
    <figure>
        <img src="../assets/img/desert.jpg" alt="desert">
        <figcaption>
            <h4>Third Thumbnail label</h4>
            <p>Lorem ipsum dolor sit amet, consectetur ...</p>
        </figcaption>
    </figure>
    <!-- Carousel Controls-->
    <a class="left carousel-control" href="#carousel-2" data-carousel-slide="prev"><</a>
    <a class="right carousel-control" href="#carousel-2" data-carousel-slide="next">></a>
</div>