Components

Code block

A near-black .ds-code panel: a .ds-code__head with the filename on the left and a small Copy button on the right, divided by a 1px rule from a scrolling .ds-code__body. Mono type, light text on var(--ds-noir), no radius and no shadow.

With filename + copy

The .ds-code__head pairs a faint uppercase .ds-code__filename with a .ds-button--sm styled to read on the dark head. The .ds-code__body is a <pre> that scrolls horizontally. The Copy button below is wired by the inline script (clipboard with a textarea fallback) and flashes “Copied”.

Dark panel

format.js

export function toISO(d) {
  const pad = (n) => String(n).padStart(2, "0");
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
}

<div class="ds-code" data-language="js">
  <div class="ds-code__head">
    <span class="ds-code__filename">format.js</span>
    <button class="ds-button ds-button--sm" type="button" aria-label="Copy code">Copy</button>
  </div>
  <pre class="ds-code__body"><code>export function toISO(d) { … }</code></pre>
</div>

Shell snippet

Any code works — the body shows it verbatim and scrolls when a line overflows. Drop the filename and the React component falls back to the language label.

Long lines scroll

install.sh

npm install @diametral/design-system react react-dom && echo "Installed the Diametral Design System — import the CSS once, then the React components anywhere."

<div class="ds-code" data-language="bash">
  <div class="ds-code__head">
    <span class="ds-code__filename">install.sh</span>
    <button class="ds-button ds-button--sm">Copy</button>
  </div>
  <pre class="ds-code__body"><code>npm install @diametral/design-system react react-dom</code></pre>
</div>

React

The CodeBlock renders the code as text content (never dangerouslySetInnerHTML), so any < > & in the source shows verbatim. The Copy button writes the code to the clipboard (with a hidden-textarea fallback) and flashes “Copied”.

import { CodeBlock } from "@diametral/design-system/react";

<CodeBlock
  filename="format.js"
  language="js"
  code={`export function toISO(d) {\n  return d.toISOString().slice(0, 10);\n}`}
/>