Code Block

Airframe styles <pre> and <code> elements directly. No class needed for basic usage.

Inline code

<p>
  Use
  <code>
    npm install @airframeui/core
  </code>
  to get started.
</p>

Preview

Use npm install @airframeui/core to get started.

Code block

Wrap code in <pre><code> for multi-line blocks:

<pre>
  <code>
    function greet(name) { console.log('Hello, ' + name + '!'); } greet('World');
  </code>
</pre>

Preview

function greet(name) {
console.log('Hello, ' + name + '!');
}

greet('World');

With language class

Add a language class to <code> for syntax highlighter compatibility:

<pre>
  <code class="language-css">
    :root { --af-base-primary: #018183; --af-font-body: 'Inter', sans-serif; }
  </code>
</pre>

Preview

:root {
  --af-base-primary: #018183;
  --af-font-body: 'Inter', sans-serif;
}

Multiple blocks

<!-- Install -->
<pre>
  <code>
    npm install @airframeui/core
  </code>
</pre>
<!-- Import -->
<pre>
  <code>
    @import "@airframeui/core/core.css";
  </code>
</pre>

Preview

npm install @airframeui/core

@import "@airframeui/core/core.css";

Class reference

Element/Class	Purpose
<pre>	Styled automatically. Padding, background, border, rounded corners.
<code> (inside <pre>)	Transparent background, inherits font.
<code> (inline)	Inline code with subtle background.
.af-code-block	Alias for <pre> styling. Not required.

CSS reference

pre, .af-code-block {
  padding: var(--af-space-4);
  background: var(--af-color-surface-secondary);
  border: var(--af-border-width) solid var(--af-color-border);
  border-radius: var(--af-radius-md);
  overflow-x: auto;
  font-family: var(--af-font-code);
  font-size: var(--af-text-sm);
  line-height: var(--af-leading-normal);
}

pre code {
  background: transparent;
  padding: 0;
}

Related

• Typography