BankaiCode
A minimal inline code primitive: a native <code> with a monospace font and a subtle chip background. Reach for it for an identifier, token, path, or short snippet inside a sentence — the block, fenced variant is a separate BankaiCodeBlock (on the roadmap).
Example
Install pnpm add @bankai-vue/core and import BankaiCode from it.
The size is em-relative, so a snippet like --bankai-code-bg stays proportional even in this smaller line.
Native semantics, no props
It renders a real <code>, so the phrasing semantics live on the element itself — assistive tech and the browser treat it as code for free. Today it takes no props; it is a pure, themeable wrapper. A polymorphic as (to reach the sibling monospace elements <kbd>, <samp>, <var>) may arrive later if dogfooding calls for it — a non-breaking addition.
Props
This component has no props.
Emits
This component emits no events.
Slots
| Slot | Description |
|---|---|
default | Inline code content — an identifier, token, path, or short snippet. |
Exposes
This component exposes nothing on its instance.
Theming
Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.
| Token | Default | Purpose |
|---|---|---|
--bankai-code-font-family | var(--bankai-font-mono) | Monospace font stack of the inline chip. |
--bankai-code-bg | var(--bankai-color-surface) | Inline chip background. |
--bankai-code-radius | var(--bankai-radius) | Chip corner radius. |
--bankai-code-font-size | 0.875em | Chip font size (em-relative, scales with the surrounding text). |
--bankai-code-padding-block | 0.125em | Vertical padding of the chip (em-relative). |
--bankai-code-padding-inline | 0.25em | Horizontal padding of the chip (em-relative). |