---
title: Code
description: Lines of source with numbers and syntax colours, one of them highlighted. Used for stack frames, commands and queries.
---

```tsx
import { Code } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CodeBasic() {
  return (
    <Preview block={true}>
      <Code.Root
        code={`const value = 12;\nconsole.log(value);`}
        highlightLine={13}
        language="typescript"
        startLine={12}
      />
    </Preview>
  );
}
```

- Use Code for blocks of source, such as a stack frame or a config snippet. For a single monospace value in a form, use [Input](/deft/components/input) or [Textarea](/deft/components/textarea) with `font="mono"`.
- `startLine` numbers the first line, so a frame shows its real line numbers.
- `highlightLine` marks the line that threw, on a danger tint, by its line number.
- `language` colours the syntax with Shiki, in theme tokens: `bash`, `json`, `javascript`, `sql` or `typescript`. The highlighter loads on first use; until then the code shows as plain text.
- Long lines scroll sideways instead of wrapping.

## Commands

```tsx
import { Code } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CodeCommands() {
  return (
    <Preview block={true}>
      <Code.Root code={`mkdir example\ncd example`} language="bash" lineNumbers={false} />
    </Preview>
  );
}
```

Turn off `lineNumbers` for a command or a config snippet the reader copies.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `code` | `string` | - | |
| `startLine?` | `number` | `1` | |
| `highlightLine?` | `number` | - | |
| `language?` | `"bash" \| "json" \| "javascript" \| "sql" \| "typescript"` | - | |
| `lineNumbers?` | `boolean` | `true` | |

Parts: `Root`. Other props go to the native `pre`.