Code snippets

Starlight enables Expressive Code by default — the same engine many teams expect from VS Code themes: titles, copy buttons, diffs, highlights, and terminal frames.

File titles and copy

src/lib/access.ts

export function userHasRequiredRoles(
  userRoles: string[],
  requiredRoles: string[] | undefined,
): boolean {
  if (!requiredRoles?.length) return true;
  return requiredRoles.some((r) => userRoles.includes(r));
}

Insert / delete (changelog, migrations)

Webhook payload v1 → v2

{
  "event": "asset.updated",
 "legacyId": "abc-123",
 "assetId": "550e8400-e29b-41d4-a716-446655440000",
  "timestamp": "2026-05-20T10:00:00Z"
}

Line highlights (focus reader attention)

Example groups claim after sign-in (claim values for IAM setup: access matrix):

Keycloak token (excerpt)

{
  "sub": "user-uuid",
  "groups": [
    "WIKIJS_CONNECT_CUSTOMER",
    "WIKIJS_SPACE_CUSTOMER"
  ],
  "azp": "astro-starlight"
}

Shell and ops runbooks

export PATH="/path/to/node/bin:$PATH"
npm install
npm run dev

Windows equivalent

$env:Path = "C:\path\to\node;$env:Path"
npm install
npm run dev

Config formats (SaaS staples)

docker-compose excerpt

services:
  docs:
    image: dih-docs:latest
    ports:
      - "4321:4321"
    environment:
      KEYCLOAK_ISSUER: https://iam.dev.dih-cloud.com/realms/development

.env (never commit secrets)

KEYCLOAK_CLIENT_ID=astro-starlight
KEYCLOAK_CLIENT_SECRET=***
PUBLIC_SITE_URL=http://localhost:4321

GraphQL / SQL / HCL (multi-language portals)

Example query

query Asset($id: ID!) {
  asset(id: $id) {
    id
    name
    policies { id type }
  }
}

When to use <Tabs> instead

If the same procedure differs by language and readers switch often, prefer Starlight <Tabs> over long stacked code blocks.

Next: Diagrams or API embed.