Skip to main content

Code

Code renders a <code> chip in the mono face on the muted fill, or with block a <pre><code> that keeps whitespace and scrolls sideways. It does no syntax colouring: language only sets the conventional language-<name> class that Prism and highlight.js look for.

import Code from '@zuilib/components/code'

Inline​

The chip uses --radius-sm, bg-muted, and --text-sm so it sits a step under body text.

Loading example

Block​

block renders a padded <pre> with overflow-x-auto. The <pre> has tabIndex={0} and a keyboard focus ring, so an overflowing line can be scrolled with the arrow keys without a mouse.

Loading example

Sizing a block​

className lands on the <pre>: cap the height with max-h-* and the block scrolls vertically too. codeClassName reaches the inner <code>.

Loading example

Props​

CodeProps extends HTMLAttributes<HTMLElement> with:

PropTypeDefaultDescription
blockbooleanfalseInline code; true renders pre > code, padded, overflow-x-auto, focusable
languagestring—data-language on the root and language-<name> on the code; no colouring itself
classNamestring—Merged last onto the root: the code inline, the pre when block
codeClassNamestring—block only: merged onto the inner code
childrenReactNode—The source text; whitespace is kept in a block

The ref points at the root in both modes (HTMLElement; the <pre> when block).

Slots​

SlotElementNotes
[data-slot="code"]codeThe inline root, or the inner code of a block. data-language on the inline root
[data-slot="code-block"]prePresent with block: the root. Also data-language
/* Consumer CSS: a darker block surface regardless of theme */
[data-slot="code-block"] {
  background-color: var(--popover);
  border: 1px solid var(--border);
}

Accessibility​

  • Inline code is a plain <code> element; screen readers read it in flow.
  • A block <pre> is in the tab order (tabIndex={0}) because a scroll region must be keyboard reachable; it shows the shared --ring ring on focus-visible only, and the arrow keys scroll it.
  • white-space: pre and overflow-x-auto keep long lines intact rather than wrapping, so the text is never reflowed away from its indentation.
  • The component adds no role or aria-label; give a block an aria-label when the surrounding text does not say what it is.
  • Kbd: keyboard keys and chords.
  • Text editor: editable markdown with its own code highlighting.
  • Theming: --font-mono, --muted, --radius-sm/md.