Primary font
Primary font bold
Primary font italic
Serif font
Mono font
<p class="base-font-family">
Primary font
</p>
<p class="base-font-family">
<strong>Primary font bold</strong>
</p>
<p class="base-font-family">
<em>Primary font italic</em>
</p>
<p class="font-family-serif">
Serif font
</p>
<p class="font-family-mono">
Mono font
</p>
<p>
<a href="javascript:void()" class="link">Link</a>
<span class="separator"> </span>
<a href="javascript:void()" class="link link--hover">Link Hover</a>
<span class="separator"> </span>
<a href="javascript:void()" class="link link--active">Link Active</a>
<span class="separator"> </span>
<a href="javascript:void()" class="link link--focus">Link Focus</a>
</p>
<button class="c-btn">
Button
</button>
<a class="c-btn c-btn--primary c-btn--link" href="javascript:void()">
Link Button
<svg class="c-btn__icon c-icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
<path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
</svg>
</a>
<div class="l l--fill">
<div class="l__row">
<div class="l__col-2">
<button class="c-btn c-btn--xsmall c-btn--primary">
Extra Small Button
</button>
</div>
<div class="l__col-2">
<button class="c-btn c-btn--small c-btn--primary">
Small Button
</button>
</div>
</div>
<div class="l__row">
<div class="l__col-2">
<button class="c-btn c-btn--medium c-btn--primary">
Medium Button
</button>
</div>
<div class="l__col-2">
<button class="c-btn c-btn--large c-btn--primary">
Large Button
</button>
</div>
</div>
<div class="l__col-12">
<button class="c-btn c-btn--xlarge c-btn--primary">
Extra Large Button
</button>
</div>
</div>
<svg class="c-cn-tower " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 640" style="height:10rem">
<title>CN Tower</title>
<g id="c-cn-tower__container">
<path d="M28.71,0V66.37H26.47q.79,26.13,1,52.37H25.05v2.5c-2.25,1-3.7,2.69-3.7,4.55,0,2.46,2.57,4.53,6.12,5.3q.09,35.57-.75,71.33h-4v7.39h3.81c-.07,2.71-.15,5.42-.22,8.14H14.38v10.64C10.76,230,8.52,232,8.52,234.12a3,3,0,0,0,.07.52H5.08v3.17H6.35v2.65h.9v1.42h-.9v3.17h.9v1.38h-.9V249H8.18c.12,1.33,1.08,2.6,2.76,3.7v5.19c-2,1.09-3.21,2.34-3.21,3.7,0,3.37,7.17,6.17,16.83,7C19.42,391.77,8.51,516.11-.1,640H60.1C52.17,516.15,42.45,392.31,37.41,268.46c8.93-1,15.38-3.67,15.38-6.87,0-1.24-1-2.38-2.69-3.4v-5.37c1.81-1.13,2.9-2.42,3-3.81h.67v-2.58H52.41v-1.38H53.8v-3.17H52.41v-1.42H53.8v-2.65h1.27v-3.17H52.19a3,3,0,0,0,.07-.52c0-1.84-1.66-3.56-4.44-4.93V218H35.65c-.08-2.71-.15-5.42-.22-8.14h3.1v-7.39H35.24q-.92-35.72-1.16-71.44c3.29-.85,5.6-2.84,5.6-5.19,0-1.89-1.51-3.56-3.81-4.59v-2.46H34q0-26.18.34-52.37h-2V0Z" class="c-cn-tower__property-fill" />
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" class="c-heart " viewBox="0 0 128 128" style="height:10rem">
<title>Heart</title>
<g class="c-heart__container">
<path d="M118.041 9.959c-6.152-6.153-14.652-9.959-24.041-9.959-9.389 0-17.889 3.805-24.041 9.959-2.361 2.36-4.372 5.068-5.959 8.037-1.587-2.969-3.597-5.677-5.959-8.037-6.152-6.153-14.652-9.959-24.041-9.959-9.389 0-17.889 3.805-24.041 9.959-6.154 6.152-9.959 14.652-9.959 24.041 0 9.389 3.805 17.889 9.959 24.041l54.041 53.959 54.041-53.959c6.154-6.152 9.959-14.652 9.959-24.041 0-9.389-3.805-17.889-9.959-24.041z" class="c-heart__property-fill"></path>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 616.82 70.85" class="c-logo ">
<title>Myles Braithwaite</title>
<g class="c-logo__container">
<g class="c-logo__myles">
<path d="M0,55V2.88H14.26l13.46,19,13.39-19H55.23V55H40.4V38c0-4.1.07-8.64.14-12.24l-.14-.07c-2.16,3.31-4.54,6.7-6.84,10L27.36,44.5,21.1,35.72c-2.38-3.31-4.68-6.7-6.84-10l-.14.07c.07,3.6.14,8.14.14,12.24V55Z" class="c-logo__property-fill"/>
<path d="M63.58,70.85l9.5-19.73L59,19.59H73.66L77,28.8c1,2.74,2,5.54,2.88,8.07h.14c1-2.66,2.09-5.4,3.17-8.14l3.67-9.15h13.46L77.83,70.85Z" class="c-logo__property-fill"/>
<path d="M103.82,0h14.26V55H103.82Z" class="c-logo__property-fill"/>
<path d="M158.54,53.07a35.06,35.06,0,0,1-13.83,2.74c-12.53,0-21.1-6.91-21.1-18.15,0-11.66,9.15-18.87,19.23-18.87,8.71,0,17.71,5.4,17.71,18.15a28.55,28.55,0,0,1-.22,3.6H138.09c1.37,3.74,4.75,5,8.57,5a25.93,25.93,0,0,0,11.88-3.31Zm-10.8-19.87a4.85,4.85,0,0,0-5-4.32c-2.52,0-4.25,1.58-4.9,4.32Z" class="c-logo__property-fill"/>
<path d="M166,41.76a35.66,35.66,0,0,0,14.55,4.1c1.73,0,2.59-.43,2.59-1.44,0-1.95-3.17-1.51-8.5-3-6.84-1.94-9.94-5.26-9.94-10.37.07-7.63,7.13-12.24,16.49-12.24a39.89,39.89,0,0,1,14.55,2.88V32.76a34.94,34.94,0,0,0-14-4c-1.73,0-2.45.5-2.45,1.37,0,1.8,3,1.37,8.35,2.88,6.84,1.94,10.08,5,10.08,10.37-.07,7.92-7.34,12.46-16.92,12.46a38.77,38.77,0,0,1-14.76-3Z" class="c-logo__property-fill"/>
</g>
<g class="c-logo__braithwaite">
<path d="M220.1,2.88h16.13c8.28,0,13.39.94,17,3s6.26,5.47,6.26,10.15c0,4.9-2.81,8.06-7.92,10v.14c7.27,2.45,10.08,7.06,10.08,12.82,0,6-3.1,10.73-9.07,13.39-4,1.8-9.22,2.66-15.55,2.66H220.1Zm18,20.81c4.46,0,6.55-1.37,6.55-4.54a3.69,3.69,0,0,0-2.16-3.67c-1.08-.58-2.74-.79-5.83-.79h-1.73v9Zm-1,19.51c4.25,0,6.41-.36,7.63-1a4.09,4.09,0,0,0,2.09-4c0-3.53-2.45-5-7.2-5h-4.68v10Z" class="c-logo__property-fill"/>
<path d="M266.61,19.59h14V23.4l.14.07a12.4,12.4,0,0,1,9.43-4.54,12.92,12.92,0,0,1,2.59.29v13.1a18.89,18.89,0,0,0-3.89-.43,10.87,10.87,0,0,0-8,3V55H266.61Z" class="c-logo__property-fill"/>
<path d="M316,53.28a17.46,17.46,0,0,1-9.22,2.52,14.93,14.93,0,0,1-8.35-2.23,9.74,9.74,0,0,1-4.54-8.5,10.32,10.32,0,0,1,4.18-8.5c2.74-2,6.48-2.66,9.94-2.66a25.89,25.89,0,0,1,5.4.58V34a3.36,3.36,0,0,0-1-2.59c-1.08-1-2.88-1.3-4.75-1.3a27.38,27.38,0,0,0-10.3,2.38V21.39a33.17,33.17,0,0,1,13.11-2.59c5.11,0,9.79,1.15,12.82,3.46s4.39,5.69,4.39,10.15V42.63c0,1.44.5,2.3,1.8,2.3a3.79,3.79,0,0,0,1.66-.43v9.79a14.29,14.29,0,0,1-6.7,1.37,13.45,13.45,0,0,1-8.28-2.38Zm-2.59-11.81a11.47,11.47,0,0,0-2.09-.22c-1.87,0-3.6.72-3.6,2.59s1.51,2.52,3.17,2.52a7.14,7.14,0,0,0,2.52-.5Z" class="c-logo__property-fill"/>
<path d="M343.07.36a7.42,7.42,0,1,1-7.49,7.42A7.42,7.42,0,0,1,343.07.36Zm-7.13,19.23H350.2V55H335.95Z" class="c-logo__property-fill"/>
<path d="M383,54.08a23,23,0,0,1-8.86,1.73c-4.39,0-8.14-1.37-10.44-3.67-2-2-3.46-5-3.46-11.16V30.82H355V19.59h5.26V10.73l14.26-2.45v11.3H383V30.82h-8.5V40c0,2.81.86,4.39,3.53,4.39a15.12,15.12,0,0,0,5-1.15Z" class="c-logo__property-fill"/>
<path d="M388.94,0h14.26V22.18l.14.07a16.84,16.84,0,0,1,9.94-3.46,13.2,13.2,0,0,1,9.14,3.38c2.3,2.23,3.46,5.4,3.46,10.58V55H411.62V34.92a4.75,4.75,0,0,0-1-3.38,3.69,3.69,0,0,0-2.74-1,7.12,7.12,0,0,0-4.68,1.87V55H388.94Z" class="c-logo__property-fill"/>
<path d="M427.74,19.59h14.47l2.38,8.06c1.08,3.67,2,7.13,2.88,10.51h.14c.79-3.31,1.66-6.84,2.66-10.51l2.23-8.06h10.87l2.23,8.06c1,3.67,1.87,7.06,2.66,10.51h.14c.86-3.46,1.87-7,2.88-10.51l2.38-8.06h13.39L475.05,55H462.16l-1.58-5.69c-1-3.67-2.09-7.78-3-11.31h-.14c-.86,3.53-1.94,7.56-3,11.31L452.95,55H439.7Z" class="c-logo__property-fill"/>
<path d="M509.39,53.28a17.46,17.46,0,0,1-9.22,2.52,14.93,14.93,0,0,1-8.35-2.23,9.74,9.74,0,0,1-4.54-8.5,10.32,10.32,0,0,1,4.18-8.5c2.74-2,6.48-2.66,9.94-2.66a25.89,25.89,0,0,1,5.4.58V34a3.36,3.36,0,0,0-1-2.59c-1.08-1-2.88-1.3-4.75-1.3a27.38,27.38,0,0,0-10.3,2.38V21.39a33.17,33.17,0,0,1,13.11-2.59c5.11,0,9.79,1.15,12.82,3.46s4.39,5.69,4.39,10.15V42.63c0,1.44.5,2.3,1.8,2.3a3.79,3.79,0,0,0,1.66-.43v9.79a14.29,14.29,0,0,1-6.7,1.37,13.45,13.45,0,0,1-8.28-2.38ZM506.8,41.48a11.47,11.47,0,0,0-2.09-.22c-1.87,0-3.6.72-3.6,2.59s1.51,2.52,3.17,2.52a7.14,7.14,0,0,0,2.52-.5Z" class="c-logo__property-fill"/>
<path d="M536.46.36A7.42,7.42,0,1,1,529,7.78,7.42,7.42,0,0,1,536.46.36Zm-7.13,19.23h14.26V55H529.34Z" class="c-logo__property-fill"/>
<path d="M576.35,54.08a23,23,0,0,1-8.86,1.73c-4.39,0-8.14-1.37-10.44-3.67-2-2-3.46-5-3.46-11.16V30.82h-5.26V19.59h5.26V10.73l14.26-2.45v11.3h8.5V30.82h-8.5V40c0,2.81.86,4.39,3.53,4.39a15.12,15.12,0,0,0,5-1.15Z" class="c-logo__property-fill"/>
<path d="M614.8,53.07A35.06,35.06,0,0,1,601,55.81c-12.53,0-21.1-6.91-21.1-18.15,0-11.66,9.14-18.87,19.23-18.87,8.71,0,17.71,5.4,17.71,18.15a28.37,28.37,0,0,1-.22,3.6H594.35c1.37,3.74,4.75,5,8.57,5a25.93,25.93,0,0,0,11.88-3.31ZM604,33.19a4.85,4.85,0,0,0-5-4.32c-2.52,0-4.25,1.58-4.9,4.32Z" class="c-logo__property-fill"/>
</g>
</g>
</svg>
<input class="c-input-checkbox" type="checkbox" checked="checked" />
<input class="c-input-radio" type="radio" checked="checked">
<select class="c-select">
<option class="c-select__option" value="0">Option 0</option>
<option class="c-select__option" value="1">Option 1</option>
<optgroup class="c-select__group" label="Group 0">
<option class="c-select__option" value="0">
Option 0
</option>
<option class="c-select__option" value="1">
Option 1
</option>
<option class="c-select__option" value="2">
Option 2
</option>
<option class="c-select__option" value="3">
Option 3
</option>
<option class="c-select__option" value="4">
Option 4
</option>
</optgroup>
<optgroup class="c-select__group" label="Group 1">
<option class="c-select__option" value="0">
Option 0
</option>
<option class="c-select__option" value="1">
Option 1
</option>
<option class="c-select__option" value="2">
Option 2
</option>
<option class="c-select__option" value="3">
Option 3
</option>
<option class="c-select__option" value="4">
Option 4
</option>
</optgroup>
<optgroup class="c-select__group" label="Group 2">
<option class="c-select__option" value="0">
Option 0
</option>
<option class="c-select__option" value="1">
Option 1
</option>
<option class="c-select__option" value="2">
Option 2
</option>
<option class="c-select__option" value="3">
Option 3
</option>
<option class="c-select__option" value="4">
Option 4
</option>
</optgroup>
</select>
<input class="c-input-text " id="" type="text" placeholder="Text Input">
<textarea class="c-textarea " id="" placeholder="Text Area"></textarea>
<h1 class="heading-1">Heading One</h1>
<h2 class="heading-2">Heading Two</h2>
<h3 class="heading-3">Heading Three</h3>
<h4 class="heading-4">Heading Four</h4>
<h5 class="heading-5">Heading Five</h5>
<h6 class="heading-6">Heading Six</h6>
<h1 class="display-1">Display One</h1>
<h2 class="display-2">Display Two</h2>
<h3 class="display-3">Display Three</h3>
<h4 class="display-4">Display Four</h4>
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
<p class="paragraph">A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax
of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a interdum tellus. Phasellus sit amet quam id orci porttitor ullamcorper eu bibendum neque. Donec aliquet, mi id malesuada ultricies, tellus lectus dictum turpis, id sollicitudin risus nunc sit amet ex.
<p class="paragraph paragraph--lead">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a interdum tellus. Phasellus sit amet quam id orci porttitor ullamcorper eu bibendum neque. Donec aliquet, mi id malesuada ultricies, tellus lectus dictum turpis, id sollicitudin risus nunc
sit amet ex.
</p>
<ul>
<li>List Item 0</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
Item with an unordered list.
<ul>
<li>List Item 0</li>
<li>List Item 1</li>
</ul>
</li>
<li>List Item 0</li>
<li>List Item 1</li>
</ul>
<ol>
<li>List Item 0</li>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
Item with an unordered list.
<ol>
<li>List Item 0</li>
<li>List Item 1</li>
</ol>
</li>
<li>List Item 0</li>
<li>List Item 1</li>
</ol>
<dl>
<dt>Term 0</dt>
<dd>Definition 0</dd>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
<dt>Term 4</dt>
<dd>Definition 4</dd>
</dl>
<div class="dl-horizontal">
<dl>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
<dt>Lorem Ipsum</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et sagittis massa. Vestibulum condimentum libero quis sapien imperdiet, vitae consequat sem pellentesque.</dd>
</dl>
</div>
s = """Gur Mra bs Clguba, ol Gvz Crgref
Ornhgvshy vf orggre guna htyl.
Rkcyvpvg vf orggre guna vzcyvpvg.
Fvzcyr vf orggre guna pbzcyrk.
Pbzcyrk vf orggre guna pbzcyvpngrq.
Syng vf orggre guna arfgrq.
Fcnefr vf orggre guna qrafr.
Ernqnovyvgl pbhagf.
Fcrpvny pnfrf nera'g fcrpvny rabhtu gb oernx gur ehyrf.
Nygubhtu cenpgvpnyvgl orngf chevgl.
Reebef fubhyq arire cnff fvyragyl.
Hayrff rkcyvpvgyl fvyraprq.
Va gur snpr bs nzovthvgl, ershfr gur grzcgngvba gb thrff.
Gurer fubhyq or bar-- naq cersrenoyl bayl bar --boivbhf jnl gb qb vg.
Nygubhtu gung jnl znl abg or boivbhf ng svefg hayrff lbh'er Qhgpu.
Abj vf orggre guna arire.
Nygubhtu arire vf bsgra orggre guna *evtug* abj.
Vs gur vzcyrzragngvba vf uneq gb rkcynva, vg'f n onq vqrn.
Vs gur vzcyrzragngvba vf rnfl gb rkcynva, vg znl or n tbbq vqrn.
Anzrfcnprf ner bar ubaxvat terng vqrn -- yrg'f qb zber bs gubfr!"""
d = {}
for c in (65, 97):
for i in range(26):
d[chr(i+c)] = chr((i+13) % 26 + c)
print "".join([d.get(c, c) for c in s])
def fact(n, acc=1): return acc if not n else fact(n-1, n*acc)
<pre class="code-block"><code class="python">
s = """Gur Mra bs Clguba, ol Gvz Crgref
Ornhgvshy vf orggre guna htyl.
Rkcyvpvg vf orggre guna vzcyvpvg.
Fvzcyr vf orggre guna pbzcyrk.
Pbzcyrk vf orggre guna pbzcyvpngrq.
Syng vf orggre guna arfgrq.
Fcnefr vf orggre guna qrafr.
Ernqnovyvgl pbhagf.
Fcrpvny pnfrf nera'g fcrpvny rabhtu gb oernx gur ehyrf.
Nygubhtu cenpgvpnyvgl orngf chevgl.
Reebef fubhyq arire cnff fvyragyl.
Hayrff rkcyvpvgyl fvyraprq.
Va gur snpr bs nzovthvgl, ershfr gur grzcgngvba gb thrff.
Gurer fubhyq or bar-- naq cersrenoyl bayl bar --boivbhf jnl gb qb vg.
Nygubhtu gung jnl znl abg or boivbhf ng svefg hayrff lbh'er Qhgpu.
Abj vf orggre guna arire.
Nygubhtu arire vf bsgra orggre guna *evtug* abj.
Vs gur vzcyrzragngvba vf uneq gb rkcynva, vg'f n onq vqrn.
Vs gur vzcyrzragngvba vf rnfl gb rkcynva, vg znl or n tbbq vqrn.
Anzrfcnprf ner bar ubaxvat terng vqrn -- yrg'f qb zber bs gubfr!"""
d = {}
for c in (65, 97):
for i in range(26):
d[chr(i+c)] = chr((i+13) % 26 + c)
print "".join([d.get(c, c) for c in s])
</code></pre>
<pre class="code-block">
<code class="highlight"><span></span><span class="k">def</span> <span class="nf">fact</span><span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="n">acc</span><span class="o">=</span><span class="mi">1</span><span class="p">):</span> <span class="k">return</span> <span class="n">acc</span> <span class="k">if</span> <span class="ow">not</span> <span class="n">n</span> <span class="k">else</span> <span class="n">fact</span><span class="p">(</span><span class="n">n</span><span class="o">-</span><span class="mi">1</span><span class="p">,</span> <span class="n">n</span><span class="o">*</span><span class="n">acc</span><span class="p">)</span>
</code></pre>
<hr class="horizontal-rule" />
Strong is used to indicate strong importance
This text has added emphasis
The b element is stylistically different text from normal text, without any special importance
The i element is text that is set off from the normal text
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation
This text is deleted and This text is inserted
This text is deleted and This text is inserted
This text has a strikethrough
Superscript®
Subscript for things like H2O
This small text is small for for fine print, etc.
Abbreviation: HTML
Keybord input: Cmd
This text is a short inline quotation
This is a citation
The dfn element indicates a definition.
The mark element indicates a highlight
This is what inline code looks like.
This is sample output from a computer program
The variarble element, such as x = y
<p><a href="javascript:void()">This is a text link</a></p>
<p><strong>Strong is used to indicate strong importance</strong></p>
<p><em>This text has added emphasis</em></p>
<p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
<p>The <i>i element</i> is text that is set off from the normal text</p>
<p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>
<p>This text is deleted and This text is inserted</p>
<p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>
<p><s>This text has a strikethrough</s></p>
<p>Superscript<sup>®</sup></p>
<p>Subscript for things like H<sub>2</sub>O</p>
<p><small>This small text is small for for fine print, etc.</small></p>
<p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>
<p>Keybord input: <kbd>Cmd</kbd></p>
<p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>
<p><cite>This is a citation</cite>
</p>
<p>The <dfn>dfn element</dfn> indicates a definition.</p>
<p>The <mark>mark element</mark> indicates a highlight</p>
<p><code>This is what inline code looks like.</code></p>
<p><samp>This is sample output from a computer program</samp></p>
<p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
P R E F O R M A T T E D T E X T ! " # $ % & ' ( ) * + , - . / 0 1 2 3 4 5 6 7 8 9 : ; < = > ? @ A B C D E F G H I J K L M N O P Q R S T U V W X Y Z [ \ ] ^ _ ` a b c d e f g h i j k l m n o p q r s t u v w x y z { | } ~
<pre>
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
</pre>