<h1>Styling Code Samples</h1>
<p>Each example includes 1em of padding on the pre element. </p>

<br />
<h2>Background Only</h2><pre class="bg-only"><code>brew install phpunit</code></pre>
<br />
<h2>Box Only</h2>
<pre class="box-only"><code>brew install phpunit</code></pre>
<br />
<h2>Border Top & Bottom</h2>
<pre class="border-top-bottom"><code>brew install phpunit</code></pre>
<br />
<h2>Dashed Border Top & Bottom</h2>
<pre class="dashed-border-top-bottom"><code>brew install phpunit</code></pre>
<br />
<h2>Border Top & Bottom with Background</h2>
<pre class="border-top-bottom-bg"><code>brew install phpunit</code></pre>
<br />
<h2>Dashed Border Top & Bottom with Background</h2>
<pre class="dashed-border-top-bottom-bg"><code>brew install phpunit</code></pre>
<br />
<h2>Thick Left Border</h2>
<pre class="thick-left-border"><code>brew install phpunit</code></pre>
<br />
<h2>Thick Right Border with Icon</h2>
<pre class="thick-right-border-icon"><code>brew install phpunit</code></pre>
<br />
<h2>Thick Top Border with Label</h2>
<p>The label in the border is provided by a rel attribute on the pre element.</p>
<pre class="thick-top-border-label" rel="Console"><code>brew install phpunit</code></pre>

pre {
  padding: 1em;
}

.bg-only {
  background-color: #E5E5E5;
}

.box-only {
  border: 1px solid;
}

.border-top-bottom {
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.dashed-border-top-bottom {
  border-top: 1px dashed;
  border-bottom: 1px dashed;
}

.border-top-bottom-bg {
  background-color: #E5E5E5;
  border-top: 1px solid;
  border-bottom: 1px solid;
}

.dashed-border-top-bottom-bg {
  background-color: #E5E5E5;
  border-top: 1px dashed;
  border-bottom: 1px dashed;
}

.thick-left-border {
  border-left: 5px solid;
  background-color: #E5E5E5;
}

.thick-right-border-icon {
  border-right:2em solid;
  background-color: #E5E5E5;
  position: relative;
}

.thick-right-border-icon:after {
  content:"</>";
  position: absolute;
  top: 0.5em;
  right: -2em;
  color :#fff;
  font-size: 0.85em;
}

.thick-top-border-label {
  background-color: #E5E5E5;
  position: relative;
  line-height: 1.5
}

.thick-top-border-label:before {
  content:attr(rel);
  position: absolute;
  top: -1.75em;
  left: 0;
  color :#fff;
  font-size: 0.85em;
  background-color: purple;
  width: 100%;
  line-height: 2;
  text-indent: 15px;
}

var js = '';