text.code

A block of code or terminal output shown to the reader

Component

<Text>

Renders

<pre>

Profile

View as Markdown

Text intents

Example

Preview

Pack my box with five dozen liquor jugs.

<Text intent="text.code">Pack my box with five dozen liquor jugs.</Text>

Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

If it is
Use
A block of code or terminal output shown to the reader
text.code this page
A sentence that mentions code; wrap the code in <code> inside text.body
text.body
Code or a command
rather than text.quote
text.code this page
A code sample on the page
rather than text.line
text.code this page
A code sample on the page
rather than text.output
text.code this page
A code sample on the page
rather than text.diff
text.code this page
A code sample of several lines
rather than text.snippet
text.code this page
An intent named in prose
rather than text.marker
text.code this page
A code sample of several lines
rather than layout.command
text.code this page

Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

Built from
typography.monotone.default

For registry authors

Starter intents. These are the intents prongs add puts in your registry, shown in this site’s theme. Yours are your own registry.ts: rename, restyle and add to them, and see them with prongs add gallery.

What this intent is built from and its entry in components/prongs/registry.ts. You only need this to change how it looks or to add an intent like it.

How text.code resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

typography.mono
Monospaced type
```
font-mono text-sm
```
tone.default
Main text colour
```
text-foreground
```

text.code

A block of code or terminal output shown to the reader

overflow-x-auto whitespace-pre rounded-xl border
border-code-border bg-surface-0 p-4 leading-[1.7]

Final classes

font-mono text-sm text-foreground overflow-x-auto whitespace-pre
rounded-xl border border-code-border bg-surface-0 p-4
leading-[1.7]

Definition

'text.code': {
  kind: 'semantic',
  description: 'A block of code or terminal output shown to the reader',
  refs: ['typography.mono', 'tone.default'],
  binding: {
    element: 'pre',
    classes: 'overflow-x-auto whitespace-pre rounded-xl border border-code-border bg-surface-0 p-4 leading-[1.7]',
  },
  notFor: [
    {
      context: 'a sentence that mentions code; wrap the code in <code> inside text.body',
      instead: 'text.body',
    },
  ],
},