Code
Literal text in the mono face, inline or as a block.
On this page
Code is literal text in the mono face: a command, a value, a file name. Inline, .code on a <code> is a small chip that sits in the line. As a block, code-block on a <pre> is a well that scrolls on its own when a line is long.
Code
<p class="m(0) text-sm fg-text-body leading-md">Install the package with <code class="code">npm install @master/ui</code>, then import it after <code class="code">@master/css</code>.</p>#Block
Put code-block on the <pre> and keep a <code> inside it for semantics. Lines keep their breaks, and the block scrolls sideways instead of wrapping. Give it tabindex="0" when its lines can be longer than the block, so the keys can scroll it.
Block
<pre class="code-block" tabindex="0"><code>@import '@master/css';@import '@master/ui';@theme {--color-brand: var(--color-indigo-50);}</code></pre>#Lines
To say something about one line, make each line a code-line. The block then lays its lines out as a grid: every line is as wide as the longest one, so a band on a line runs the whole scrolling width, and the line breaks between the elements cost nothing, because white space between grid items is not drawn. Write one element per line of code.
code-line-highlight is the line being talked about: a tint, and a rule of ink at its start. code-numbered on the block numbers the lines with a CSS counter, in a gutter that is not selected or copied with the code.
Numbered lines and a highlight
<pre class="code-block code-numbered" tabindex="0"><code class="code-line">.btn {</code><code class="code-line"> --btn-height: 2.375rem;</code><code class="code-line code-line-highlight"> --btn-radius: var(--radius-control);</code><code class="code-line"> border-radius: calc(var(--btn-radius) * var(--corner-scale));</code><code class="code-line"> corner-shape: var(--corner-shape);</code><code class="code-line">}</code></pre>#A diff
code-line-added and code-line-removed mark the lines of a change. The hue agrees with the sign the line already starts with: keep the + and the - in the text, as a patch has them, so the change reads without color and copies as a patch.
A diff
<pre class="code-block" tabindex="0"><code class="code-line"> @theme {</code><code class="code-line code-line-removed">- --radius-control: .5rem;</code><code class="code-line code-line-added">+ --radius-control: .625rem;</code><code class="code-line"> --radius-surface: 1rem;</code><code class="code-line"> }</code></pre>#Panel
code-panel puts a header over the block, in one well: the file's name in code-title and a control at the end, which sits 4px in with the concentric corner. The block inside gives up its own well.
Set --code-radius on a standalone code-block or on the code-panel that owns it. The default is var(--radius-control); a root held directly in a tray uses var(--radius-surface) so its corner follows the holder's inset. A panel's inner block stays square and transparent, keeping one contour around the composition.
Copying needs a script, and three lines are enough: read the block's text and hand it to the clipboard.
Panel
<div class="code-panel"> <div class="code-header"> <span class="code-title">app.css</span> <button type="button" class="btn btn-quiet btn-sm" id="copy-app-css"> <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d="M9 9h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V10a1 1 0 0 1 1-1M16 9V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3" /> </svg>Copy</button> </div><pre class="code-block" tabindex="0"><code>@import '@master/css';@import '@master/ui';@theme {--color-brand: var(--color-indigo-50);}</code></pre></div><script> document.getElementById('copy-app-css').addEventListener('click', function (event) { var button = event.currentTarget navigator.clipboard.writeText(button.closest('.code-panel').querySelector('.code-block').textContent).then(function () { button.lastChild.textContent = 'Copied' setTimeout(function () { button.lastChild.textContent = 'Copy' }, 1600) }) })</script>#Code or kbd
Use code for what a reader types as text or reads from a program, and kbd for a key to press. The stylesheet does not highlight syntax; a highlighter's spans keep their own colors inside a block.
#Classes
| Class | Description |
|---|---|
code | Inline code, on a <code>: a small chip in the line |
code-block | A block of code, on a <pre>: a well whose lines keep their breaks and scroll sideways. Give it tabindex="0" when a line can be longer than the block |
code-line | One line of a block, on a <code> or a <span>. With lines marked, the block lays them out as a grid and each is as wide as the longest |
code-line-highlight | The line being talked about: a tint, and a 2px rule of ink at its start. With code-line |
code-line-added | An added line of a diff, in the success hue; keep the + in the text. With code-line |
code-line-removed | A removed line of a diff, in the danger hue; keep the - in the text. With code-line |
code-numbered | Numbers the code-line elements of the block with a CSS counter, in a gutter that is not selected or copied. With code-block |
code-panel | One well around a header and a block; the block inside gives up its own well |
code-header | A 40px strip over the block, with the name at the start and a control at the end. A copy button there needs a script that hands the block's text to the clipboard |
code-title | The name of the file or of the language, in the header |
#Custom properties
| Property | Default | Description |
|---|---|---|
--code-radius | var(--radius-control) | Circular radius of a standalone block before the corner scale. On code-block |
--code-radius | var(--radius-control) | Circular radius of the panel before the corner scale, also used by its inset controls; use var(--radius-surface) when held directly in a tray. On code-panel |
#Accessibility
- Give a block
tabindex="0"when a line can be longer than the block, so the keys can scroll it. - Line numbers are generated content: they are not read aloud, selected or copied.
- A highlight is visual. When the text around the block refers to a line, name what is on it rather than its color or its number.