Code block

wu-code-block styles a <pre><code> block. It scrolls sideways when a line is too long, with shadows on the sides that have more content.

Class or variable	Effect
`wu-code-block`	Root, on `<pre>`. Alternate background, border, monospace font
`wu-code-block-line`	Part. Wraps one line and numbers it
`--wu-code-block--Background`	Background, scroll shadow covers included
`--wu-code-block--FontFamily`	Font stack

Scrollable blocks need `tabindex="0"`

A block that can scroll must be reachable by keyboard: add tabindex="0" and an aria-label, so keyboard users can focus it and scroll with the arrow keys. Focus shows the focus ring.

Default

.card {
  padding: var(--wu-space-4);
  border-radius: var(--wu-radius-md);
}

<pre class="wu-code-block" tabindex="0" aria-label="SCSS example"><code>.card {
  padding: var(--wu-space-4);
  border-radius: var(--wu-radius-md);
}</code></pre>

Long lines

@use "@wovenui/core" as * with ($brand: #4361ee, $generate-utility-classes: true, $enable-dark-mode: true, $parent-selector: ".app");

<pre class="wu-code-block" tabindex="0" aria-label="Configuration example"><code>@use "@wovenui/core" as * with ($brand: #4361ee, $generate-utility-classes: true, $enable-dark-mode: true, $parent-selector: ".app");</code></pre>

Line numbers

Wrap each line in a wu-code-block-line span. The numbers are not copied with the text and not read aloud.

@use "@wovenui/components";

.page {
  color: var(--wu-text-regular);
}

<pre class="wu-code-block" tabindex="0" aria-label="Numbered example"><code><span class="wu-code-block-line">@use "@wovenui/components";</span>
<span class="wu-code-block-line"></span>
<span class="wu-code-block-line">.page {</span>
<span class="wu-code-block-line">  color: var(--wu-text-regular);</span>
<span class="wu-code-block-line">}</span></code></pre>

Background and font

A block on the surface color, in a serif font.

<pre class="wu-code-block" tabindex="0" aria-label="Custom block" style="--wu-code-block--Background: var(--wu-bg-surface); --wu-code-block--FontFamily: Georgia, serif"><code>A block on the surface color, in a serif font.</code></pre>

Load only the code block

@use "@wovenui/components/code-block";

The code block needs no other component.