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).

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).

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>;

Translation

The <code> element carries translate="no" by default, so a browser translation engine skips the subtree. A translated CLI flag, env var, or YAML key is wrong, and the reader copies it anyway.

The attribute also protects the render itself: Google Translate replaces each text node with a <font> wrapper, which detaches the text nodes React holds, so React either writes updates into a node the DOM no longer shows, or throws NotFoundError from removeChild and tears down the root.

Code also styles terms that are not code, so the default is overridable. Pass translate="yes" when the content is prose:

1import { Code } from "@ngrok/mantle/code";2 3<p>⋯4	Open the <Code translate="yes">dashboard</Code> to see your endpoints.5</p>;

Kbd and CodeBlock.Code take no such override — a key and a block of code are never translatable.

Browser translation covers what an engine does to a React DOM, and the rule your own components need.

API Reference

Code

All props from code, plus: