# Code (/components/typography/code)



`Code` marks a short fragment of computer code. It renders a native `code` element, which conveys
code semantics to assistive technology, and applies the theme's monospace code font.

apps/docs/src/examples/code/basic.tsx

```tsx
import { Code } from '@luke-ui/react/code';

export default () => {
	return <Code>console.log()</Code>;
};
```

## In context [#in-context]

`Code` is inline, so it inherits the surrounding size and colour and stays on one line by default.
Pass `lineClamp` of 2 or more, or pass `textWrap`, when the content should wrap.

apps/docs/src/examples/code/in-context.tsx

```tsx
import { Code } from '@luke-ui/react/code';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Text>
			Use the <Code>useTheme</Code> hook to access the current theme. The <Code>theme</Code> prop
			supports <Code>"light"</Code>, <Code>"dark"</Code>, and <Code>"system"</Code>.
		</Text>
	);
};
```

## API [#api]

<ComponentPropsTable
  id="type-table-code.tsx-CodeProps"
  type="{
  &#x22;id&#x22;: &#x22;code.tsx-CodeProps&#x22;,
  &#x22;name&#x22;: &#x22;CodeProps&#x22;,
  &#x22;description&#x22;: &#x22;Props for the `Code` component.&#x22;,
  &#x22;entries&#x22;: [
    {
      &#x22;name&#x22;: &#x22;lineClamp&#x22;,
      &#x22;description&#x22;: &#x22;Clamps the text to a number of lines. `true` clamps to 1 line; a number clamps to 1–5. A value\nof 2 or more allows wrapping. A single-line clamp wins over `textWrap`.&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;boolean | 2 | 1 | 3 | 4 | 5 | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;name&#x22;: &#x22;textWrap&#x22;,
      &#x22;description&#x22;: &#x22;Sets text wrapping. `'balance'` and `'pretty'` wrap across lines unless `lineClamp` clamps to\na single line.&#x22;,
      &#x22;tags&#x22;: [
        {
          &#x22;name&#x22;: &#x22;default&#x22;,
          &#x22;text&#x22;: &#x22;'default'&#x22;
        }
      ],
      &#x22;type&#x22;: &#x22;\&#x22;balance\&#x22; | \&#x22;default\&#x22; | \&#x22;pretty\&#x22; | undefined&#x22;,
      &#x22;simplifiedType&#x22;: &#x22;union&#x22;,
      &#x22;required&#x22;: false,
      &#x22;deprecated&#x22;: false
    },
    {
      &#x22;deprecated&#x22;: false,
      &#x22;description&#x22;: &#x22;`CodeProps` also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.&#x22;,
      &#x22;name&#x22;: &#x22;__nativePropsForwarding&#x22;,
      &#x22;required&#x22;: true,
      &#x22;simplifiedType&#x22;: &#x22;&#x22;,
      &#x22;tags&#x22;: [],
      &#x22;type&#x22;: &#x22;&#x22;
    }
  ]
}"
/>