Code blocks

Basic blocks with titles

hello.ts

export function greet(name: string): string {
  return `Hello, ${name}`;
}

Line highlighting

tokens.ts

const ramp = deriveTokens("#4f46e5");
const css = tokensToCss(ramp); // this line is highlighted
console.log(css);

Grouped samples

Code groups keep one snippet per language or package manager, with synchronized tab selection across the page. Wrap consecutive fenced code blocks in a CodeGroup component and give each block a title:

<CodeGroup>
  ...one fenced code block per tab, each with a title="..." label...
</CodeGroup>

Here is a rendered code group:

pnpm

pnpm add @graphstaff/ai-client

npm

npm install @graphstaff/ai-client

yarn

yarn add @graphstaff/ai-client