Code example

A code example is a block of source code that readers are meant to copy: a quiet background, a thin border and room around the text. Every block of HTML in this documentation is one.

Use it for whole snippets. For a word or a line of code inside a sentence, a plain <code> element is enough; see Typography.

Wrap a <pre> with a <code> inside it in an element with the class code-example. Both must be direct children, in that order.

<label for="title">Title</label>
<input type="text" id="title">

<div class="code-example">
  <pre><code>&lt;label for="title"&gt;Title&lt;/label&gt;
&lt;input type="text" id="title"&gt;</code></pre>
</div>

Escape the code: write < for < and & for &, or the browser reads the example as real HTML. Start the code directly after the opening <code> tag, because a <pre> shows every space and line break.

Nausikaä does not color the code itself; that takes a script. The code example is made to go with highlight.js: it sets the background, border and text color, and gives the block more padding once highlight.js has added its hljs class. Name the language as a class on the <code> element.

button.primary {
  --nausikaa-button-background: rebeccapurple;
}

<link rel="stylesheet" href="/styles/github.css">
<script src="/scripts/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

<div class="code-example">
  <pre><code class="css">button.primary {
  --nausikaa-button-background: rebeccapurple;
}</code></pre>
</div>

The colors of the code come from the highlight.js theme you load. Pick a light and a dark one if your site follows the visitor’s system setting.