language label and copy

Shell
# Warm the cache and check the headers
curl -s -o /dev/null -D - https://example.com/api/feed | grep -i cache-control
npm run build && npm run start

filename header with line numbers

feed.ts
import { cache } from "./cache";
type Feed = { items: { id: string; title: string }[]; updatedAt: number };
// Returns the cached feed while it is fresh, otherwise reloads it.
export async function readFeed(load: () => Promise<Feed>, ttl = 60_000) {
  const cached = cache.get("feed");
  if (cached && Date.now() - cached.updatedAt < ttl) {
    return cached;
  }
  const fresh = await load();
  cache.set("feed", fresh);
  return fresh;
}

soft wrap, controlled

long-lines.ts
export const description = "This is a deliberately long string so the wrap toggle has something to wrap: the quick brown fox jumps over the lazy dog, again and again, until the line is much wider than the block.";
export const short = 1;

json, bare variant (hover or focus for copy)

{
  "items": [
    { "id": "a1", "title": "Sample item one", "price": 24.5 },
    { "id": "b2", "title": "Sample item two", "price": 38 }
  ],
  "cached": true,
  "ttl": 60,
  "note": null
}

tsx, max height

feed-list.tsx
export function FeedList({ items }: { items: { id: string; title: string }[] }) {
  if (items.length === 0) return <p className="text-muted-foreground">Nothing here yet.</p>;
  return (
    <ul className="grid gap-1">
      {items.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

composed parts

JSON
{
  "items": [
    { "id": "a1", "title": "Sample item one", "price": 24.5 },
    { "id": "b2", "title": "Sample item two", "price": 38 }
  ],
  "cached": true,
  "ttl": 60,
  "note": null
}