Code block

A monospace container for displaying code snippets, API keys, webhook URLs, or shell commands. Use .nano-code--inline for short inline fragments and the full component for multi-line blocks.

Optional syntax highlighting is left to userland (Highlight.js, Prism, Shiki). The component only provides layout, typography, and surface styling.

Block

stripe listen --forward-to localhost:3000/webhooks/stripe

<div class="nano-code">
  <div class="nano-code__header">
    <span class="nano-code__language">shell</span>
    <div class="nano-code__actions">
      <button class="nano-copy__button" type="button">Copy</button>
    </div>
  </div>
  <pre class="nano-code__body"><code>stripe listen --forward-to localhost:3000/webhooks/stripe</code></pre>
</div>

Inline

<p>Set <code class="nano-code nano-code--inline">STRIPE_WEBHOOK_SECRET</code> in your environment.</p>

Terminal (dark)

$ bin/rails generate nanoui:component --all
  ✓ stat (CSS)
  ✓ empty (CSS)
  ✓ copy (CSS, Stimulus)

<div class="nano-code nano-code--terminal">
  <pre class="nano-code__body"><code>$ bin/rails generate nanoui:component --all</code></pre>
</div>

Variants

• .nano-code--inline — for inline fragments inside running text
• .nano-code--terminal — dark palette for shell/terminal examples
• .nano-code--wrap — allow long lines to wrap instead of scrolling

Elements

• .nano-code__header — optional toolbar (language label, copy button, etc.)
• .nano-code__language — label for the language/shell
• .nano-code__actions — slot for buttons (typically a copy button)
• .nano-code__body — the <pre> container holding the code itself