Code Fixtures

Use this page for Expressive Code and markdown code block checks.

Inline code should share the same calm code surface as larger examples: pnpm --filter @sentry/starlight-theme-playground dev --host 0.0.0.0.

JavaScript

theme-fixture.ts

export interface EvaluationResult {
  name: string;
  score: number;
  metadata?: Record<string, unknown>;
}

export function summarize(results: EvaluationResult[]) {
  return results.map((result) => ({
    label: result.name,
    passed: result.score >= 0.8,
  }));
}

Terminal

Terminal

pnpm --filter @sentry/starlight-theme-playground dev
pnpm run test

pnpm release:check
pnpm pack:dry

Package Manager Tabs

pnpm

pnpm add @sentry/starlight-theme

npm

npm install @sentry/starlight-theme

Yarn

yarn add @sentry/starlight-theme

package-manager-tabs.mdx

import { TabItem, Tabs } from "@astrojs/starlight/components";

<Tabs>
  <TabItem label="pnpm">

```sh
pnpm add @sentry/starlight-theme
```

  </TabItem>
  <TabItem label="npm">

```sh
npm install @sentry/starlight-theme
```

  </TabItem>
</Tabs>

Diff

theme.css

.sidebar a {
  color: var(--ve-text-tertiary);
  color: var(--ve-text-secondary);
}

Long Line

const longValue =
  "https://example.sentry.io/organizations/sentry/issues/?project=123456789&query=is%3Aunresolved%20assigned%3Ame%20level%3Aerror%20environment%3Aproduction";

Plain Markdown Pre

This indented block checks Starlight’s plain markdown pre styling outside an Expressive Code frame.