Code

• src
• components
• code.scss

Class list

Description

Use a .snippet to highlight a piece of text and have it be styled as code. Use a .code for an entire block of code.

Be sure to use HTML character entities where appropriate.

Snippet

<p>Lorem ipsum <span class="snippet">x = 42;</span> dolor amet.</p>

Code

Thanks to the pre element, the white space is preserved when writing out your code.

function sayHello() {
    console.log('Hello.');
}

<pre class="code"><code>function sayHello() {
    console.log('Hello.');
}</code></pre>

Font size scaling

Use the font-size utility classes to adjust the size of a .code.

function sayHello() {
    console.log('Hello.');
}

<pre class="code h6"><code>function sayHello() {
    console.log('Hello.');
}</code></pre>