Code

Inline code in a sentence, and a block of code to read or copy.

Overview

A command, name or path inside a sentence is Code; several lines of code are a CodeBlock.

Inline

Do

Run bun install once, then bunx nx run-many -t test to check it.

import { Body, Code } from "@hackcove/ui";

<Body as="p">
  Run <Code>bun install</Code> once, then <Code>bunx nx run-many -t test</Code> to check it.
</Body>
Code is one short run of code inside a sentence: a command, a name, a path.
Don't

bun install bun run build bun run test

import { Body, Code } from "@hackcove/ui";

<Body as="p">
  <Code>{"bun install\nbun run build\nbun run test"}</Code>
</Body>
Code is inline, so its line breaks collapse into one run. Several lines are a CodeBlock.

Snippet

Do
bash
bun add @hackcove/ui
bun add @hackcove/theme-catppuccin-mocha
import { CodeBlock } from "@hackcove/ui";

<CodeBlock
  label="bash"
  language="bash"
  lines={["bun add @hackcove/ui", "bun add @hackcove/theme-catppuccin-mocha"]}
/>
A few lines to read or copy go in one CodeBlock, with label naming the language or file.
Don't
bun add @hackcove/ui
import { CodeBlock } from "@hackcove/ui";

<CodeBlock language="bash">bun add @hackcove/ui</CodeBlock>
One line a reader copies is a CopyLine, which has the copy button. A CodeBlock of one line has none.

Usage

  • Use Code for one short run inside a sentence. It takes the text colour and size around it, and keeps no line breaks.
  • Use CodeBlock for several lines. Give the text as children, or as lines with one entry per line.
  • label names the language or file (bash, css) in a caption above the code; language says what to colour, from bash, css, tsx, ts and json.
  • A line a reader copies is a CopyLine, not a one-line CodeBlock. A rendered part shown with its code is a CodeExample.
  • Without a language the code is one colour (text), which suits an error or a log; a long line wraps rather than scrolling.

Accessibility

  • Code renders a <code>. CodeBlock renders a <figure> with the code in <pre><code>, so the line breaks are kept.
  • label is the <figcaption>, which names the figure.
  • CodeBlock takes aria-* and data-* on its figure.

API

Code

Inline code: mono, on a subtle inset background. It takes the surrounding text colour and size (a touch smaller, for the mono face).

CodeBlock

A static multi-line block of code: mono, in a bordered inset box, long lines wrap. No client JS; language colours it, and label names the language or file (bash, css) in a caption above the code. text (the default) leaves the code in one colour, for a block that is not a language. Give the text as children or as lines. Every other figure prop goes on the root <figure>. For one line a reader copies, use CopyLine.

label
Type
string
language

What the code is written in; text (the default) colours nothing.

Type
"text" | "tsx" | "ts" | "json" | "bash" | "css"
Default
text
lines
Type
string[]