Code tabs

One job written for several tools: npm, pnpm, cargo. A <figure data-tabs> holding a run of <pre> shows one at a time, under a row of tabs.

Basic

npm i s72

pnpm add s72

cargo add s72

<figure data-tabs>
  <pre data-lang="sh" data-title="npm"><code>npm i s72</code></pre>
  <pre data-lang="sh" data-title="pnpm"><code>pnpm add s72</code></pre>
  <pre data-lang="sh" data-title="cargo"><code>cargo add s72</code></pre>
</figure>

data-title names the tab. Leave it out and the tab takes the block's data-lang.

Notes

• s72.js moves each <pre> into a figure of its own, so every block keeps the code view's caption, language chip and Copy button.
• The tabs are the tabs component: arrow keys move between them, Home and End jump to the ends, and aria-selected says which one is open.
• The tablist stands where a <figcaption> would, above the blocks.
• Two blocks or more make tabs. A lone <pre> is left as the plain code view it already is.