Components

Code windows

Present terminal commands and source snippets in polished, readable code windows.

Components guideCopy-ready referencev0.7.0 current

Components

Code windows

The code-window family provides a complete presentation shell and optional syntax-color helpers. Boobstrap leaves parsing to your application; these docs integrate Highlight.js while the framework token classes remain available for server-rendered or hand-authored markup.

example.html

<!-- Build boldly -->
<button class="bs-btn bs-btn-primary">
  Ship it
</button>
const ready = true;

Composition: use .bs-code-window as the shell, .bs-code-header for a label and copy action, optional .bs-code-tabs for implementation variants, and .bs-code-body on the <pre>.

Terminal window

Use the header for a short context label and an optional action, then keep command output inside the scrollable code body.

Terminal

npm install @boobstrap/boobstrap
npm run build

HTML · Terminal window

<div class="bs-code-window">
  <div class="bs-code-header"><span>Terminal</span><button class="bs-code-action" type="button">Copy</button></div>
  <pre class="bs-code-body bs-m-0" tabindex="0" aria-label="Terminal commands"><code>npm install @boobstrap/boobstrap
npm run build</code></pre>
</div>

Tabbed source window

Use code tabs and panels for equivalent implementations or languages. The tab controller keeps selection, focus, and panel visibility synchronized.

Install

npm install @boobstrap/boobstrap

pnpm add @boobstrap/boobstrap

HTML · Tabbed code window

<div class="bs-code-window">
  <div class="bs-code-header">
    <span>Install</span>
    <button class="bs-code-action" type="button">Copy</button>
  </div>
  <div class="bs-code-tabs bs-code-tabs-underline" role="tablist" aria-label="Package manager" data-bs-tabs>
    <button class="bs-code-tab" id="npm-tab" type="button" role="tab"
      aria-controls="npm-panel" aria-selected="true">npm</button>
    <button class="bs-code-tab" id="pnpm-tab" type="button" role="tab"
      aria-controls="pnpm-panel">pnpm</button>
  </div>
  <div class="bs-code-panel" id="npm-panel" role="tabpanel" aria-labelledby="npm-tab">
    <pre class="bs-code-body"><code>npm install @boobstrap/boobstrap</code></pre>
  </div>
  <div class="bs-code-panel" id="pnpm-panel" role="tabpanel" aria-labelledby="pnpm-tab" hidden>
    <pre class="bs-code-body"><code>pnpm add @boobstrap/boobstrap</code></pre>
  </div>
</div>

Structure

Keep the header, optional tabs, panels, and code bodies inside .bs-code-window. A <pre><code> pair preserves whitespace and code semantics.

Overflow

Long lines scroll inside .bs-code-body; avoid wrapping commands when line breaks would change what users copy.

Highlighting

The included token classes cover static snippets. Dynamic highlighters can render their own spans without changing the window structure.

Code window API

Syntax classes color tokens you mark up. Pair them with a parser such as Highlight.js when your application needs automatic highlighting.

Class	Purpose
`.bs-code-window`	Outer shell, border, background, and clipping.
`.bs-code-header`	Optional filename, language label, or control row.
`.bs-code-action`	Compact action button for copying or opening code.
`.bs-code-body`	Scrollable, formatted code content.
`.bs-code-inline`	Inline code inside prose, tables, and labels.
`.bs-code-tabs`	Tablist layout for implementation, package-manager, or language variants.
`.bs-code-tabs-underline`	Uses a full-width underline for the selected tab instead of pill-shaped states.
`.bs-code-tab`	Individual variant tab with selected, hover, and keyboard-focus states.
`.bs-code-panel`	Variant panel that hides cleanly with the native `hidden` attribute and resets nested code-body margins.
`.bs-code-tag`	HTML tags and selectors.
`.bs-code-attribute`	Attributes and property names.
`.bs-code-string`	Quoted values and literals.
`.bs-code-comment`	Comments and secondary annotations.