Code

Marks a short fragment of inline computer code — a function name, a variable, a CLI flag, a key. Renders a native <code> element with mantle's monospace styling.

When to use

Inline within prose to identify code, file paths, env vars, or keys.
Wrap technical terms that should visually stand apart from running text.

When not to use

For multi-line or syntax-highlighted blocks. Use CodeBlock instead.
For keyboard shortcuts. Use Kbd.
For arbitrary monospace text that isn't code (use a plain monospace utility class).

Use the console.log() function to debug your code.

1import { Code } from "@ngrok/mantle/code";2 3<p>⋯4	Use the <Code>console.log()</Code> function to debug your code.5</p>;

Polymorphism

Pass asChild to render Code styling on a different element — for example, a link wrapping a code-styled label.

/api/components.json

1import { Anchor } from "@ngrok/mantle/anchor";2import { Code } from "@ngrok/mantle/code";3 4<Code asChild>⋯5	<Anchor href="https://ngrok.com/docs">/api/components.json</Anchor>6</Code>;

API Reference

Code

All props from code, plus:

Prop	Type	Default	Description
`asChild?`	`boolean`	`false`	Use the `asChild` prop to compose the `Code` styling onto alternative element types or your own React components.
`children`	`ReactNode`		The content to be rendered inside the inline code element.
`className?`	`string`		Additional CSS classes to apply to the inline code element.