Code

Inline Code

To display inline code, use the <code> element. Make sure to escape HTML angle brackets.

An example of some inline code.

<p>An example of <code>some inline</code> code.</p>

Code Blocks

If you wish to display the code in a block instead, wrap the <code> element inside a <pre> element:

.body {
  display: none;
}

<pre><code>.body {
  display: none;
}</code><pre>

$color-bg-code Background-Color for pre blocks and inline code.

$color-border-code Color for the pre block border.

$color-code Font color for inline code elements.

$monospace Font family that is used in code blocks.

Code Block Header

You can also preprend the optional header to the code block like we’ve done in this documentation:

.title {
  font-size: 1.8rem;
}

<div class="code-header">
  <span class="code-header-icon"><i class="mdi mdi-code-tags"></i></span>
</div>
<pre><code>.title {
  font-size: 1.8rem;
}</code><pre>

$color-bg-code-header Background-Color for the header bar.