# Inline code

Code, file names, and commands within running text. For code on its own lines, use [Code snippet](/components/code-snippet.md).

```tsx
// demo.tsx
import {InlineCode, Text} from '@earendil-works/elanor-react';

export default function InlineCodeDemo() {
  return (
    <Text>
      Run <InlineCode>pnpm install</InlineCode> after changing <InlineCode>package.json</InlineCode>
      .
    </Text>
  );
}
```

## Usage

```tsx
import {InlineCode} from '@earendil-works/elanor-react';

<InlineCode>pnpm install</InlineCode>;
```

Inline code uses `semantic.fontFamily.code` and `semantic.color.text.code` at `semantic.number.fontScale.inlineCode` times the size of the surrounding text, so code in a heading grows with it. The default `soft` variant adds a `semantic.color.background.fill.secondary` fill. Long identifiers wrap.

## Plain

Use `variant="plain"` in headings, tables, and dense text.

```tsx
// plain.tsx
import {InlineCode, Text} from '@earendil-works/elanor-react';

export default function InlineCodePlain() {
  return (
    <Text>
      Edit <InlineCode variant="plain">package.json</InlineCode> to change the package version.
    </Text>
  );
}
```

## Program output

Use `render={<samp />}` for output from a program, such as an error message.

```tsx
// output.tsx
import {InlineCode, Text} from '@earendil-works/elanor-react';

export default function InlineCodeOutput() {
  return (
    <Text>
      If the build prints <InlineCode render={<samp />}>Error: missing token</InlineCode>, run the
      generator again.
    </Text>
  );
}
```

## API

### `InlineCode`

Code within running text. Renders `code` by default.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `InlineCodeVariant` | `'soft'` | Visual treatment. `plain` removes the fill. |

Renders `<code>`. Also accepts its HTML attributes, `ref`, and `render`.