# Code

Source: https://iriscss.com/documentation/elements/code/

`code`, `pre`, `kbd`, `samp` and `var`, styled with no class.

## Inline code

Inline code wraps with the text. Each wrapped line keeps its own padding and corners.

```html
<p>Run <code>npm run build</code> and open <code>dist/index.html</code>.</p>
```

## Code block

Put `code` inside `pre` for a block that keeps line breaks and scrolls sideways.

```html
<pre><code>:root {
  --i-color-primary: #7c3aed;
}</code></pre>
```

## Keyboard

Nest `kbd` elements for a key combination. The outer one stays plain.

```html
<p>Press <kbd>Esc</kbd> to close, or <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> to copy.</p>
```

## Sample and variable

`samp` shows program output. `var` names a variable and keeps the text font.

```html
<p>The build prints <samp>Built 57 pages into dist</samp>.</p>
<p>The area is <var>width</var> times <var>height</var>.</p>
```

## Light

Code is dark in both themes. `.light` switches it to light colors.

```html
<p>Set <code class="light">data-theme</code> on any element.</p>
<pre class="light"><code>&lt;html data-theme="dark"&gt;</code></pre>
```

## Rounded and square

```html
<p><code class="rounded">.rounded</code> and <code class="square">.square</code></p>
```

## Variables

| Variable | Default |
| --- | --- |
| `--i-code-font-family` | `var(--i-font-mono)` |
| `--i-code-font-size` | `0.85em` |
| `--i-code-padding-block` | `0.125rem` |
| `--i-code-padding-inline` | `0.35rem` |
| `--i-kbd-font-weight` | `bolder` |
| `--i-code-color-text` | `light-dark(var(--i-color-slate-200), #8891a4)` |
| `--i-code-color-background` | `light-dark(var(--i-color-slate-700), #1a1f28)` |
| `--i-kbd-color-text` | `light-dark(var(--i-code-color-text), var(--i-color-background))` |
| `--i-kbd-color-background` | `light-dark(var(--i-code-color-background), var(--i-color-text))` |
| `--i-code-light-color-text` | `var(--i-color-slate-700)` |
| `--i-code-light-color-background` | `var(--i-color-slate-200)` |