Code

The pura-code primitive renders a single inline code element, styled as a subtle chip by default with a background, border, and monospaced font. Use the variant attribute to switch to a plain, bare monospace style with no chip decoration. Theming is driven entirely by var(--pura-*) tokens, and the inner element is exposed through the code part for custom styling.

Preview

<script type="module" src="/pura/lib/code.js"></script>

<!-- Default subtle chip -->
<pura-code>const value = 42;</pura-code>

<!-- Plain variant: bare monospace text, no chip -->
<pura-code variant="plain">git status</pura-code>

<!-- Inline within a sentence -->
<p>Call <pura-code>render()</pura-code> to update the component.</p>

<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/code.js"></script>

import "./pura/lib/code.js";