BankaiCodeBlock

Example

Pass the snippet as the code prop — it is both what renders and the exact string the copy button writes. Click Copy to try it.

pnpm add @bankai-vue/core @bankai-vue/theme-bankai

<template>
  <BankaiCodeBlock language="ts" :code="snippet" />
</template>

Bring your own highlighter

Core highlights nothing — it stays design- and tooling-agnostic. The language prop only reflects as a language-<lang> class on the <code>, the de-facto hook a highlighter (Shiki, Prism, highlight.js) or your own CSS keys off. To render already-highlighted markup, pass it through the default slot; the code prop stays the exact string the copy button writes, so the copied text is never the highlighter's wrapper markup.

Accessible copy

The copy button is a composed BankaiButton whose accessible name tracks its visible label; a successful copy is announced (and re-announced on a repeat copy) through a visually hidden role="status" live region. Override the copyLabel / copiedLabel props to set both the button text and the announcement for one block, use the copy slot (which receives the copied state) to swap in an icon, or set :copyable="false" to drop the button entirely. The copied state's duration is tunable per-block via copiedDuration (ms) and globally via BankaiConfig.codeBlockCopiedDuration (default 2000).

To localize the labels app-wide rather than per block, set a locale in the i18n config instead of the props — see the internationalization guide. A per-block prop always wins over the configured locale.

Props

Emits

This component emits no events.

Slots

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.