Code Block - Design System

Default (light — follows app theme)

<PageHeader Title="Patients"
            SupportingText="All active patients in your care." />

<div class="layout-stat-cards">
    <MetricItem Label="Active" Value="124" />
    <MetricItem Label="Discharged today" Value="8" />
    <MetricItem Label="Average LoS" Value="3.2 days" />
</div>

Dark theme (always dark)

Pass Theme="dark" to force the terminal look regardless of the app theme.

{
  "name": "design-system",
  "version": "1.0.0",
  "scripts": {
    "css:build": "npx @tailwindcss/cli -i ./Styles/app.css -o ./wwwroot/app.css --minify",
    "css:watch": "npx @tailwindcss/cli -i ./Styles/app.css -o ./wwwroot/app.css --watch"
  },
  "devDependencies": {
    "@tailwindcss/cli": "^4.2.1",
    "tailwindcss": "^4.2.1"
  }
}

With line numbers

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseAntiforgery();

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

Bare (no header)

Use when the surrounding layout already provides framing — for example a terminal-style card or a stacked tabbed example.

$ npm run css:watch
$ dotnet run

Capped height

Pass MaxHeight to cap the body and let the content scroll. Useful for long code samples in docs.

import { useState, useEffect, useCallback } from 'react';
import type { Patient, VitalSigns } from './types';

export function usePatientVitals(patientId: string) {
    const [vitals, setVitals] = useState<VitalSigns | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    const fetchVitals = useCallback(async () => {
        setLoading(true);
        setError(null);
        try {
            const response = await fetch(`/api/patients/${patientId}/vitals`);
            if (!response.ok) throw new Error('Failed to fetch vitals');
            const data = await response.json();
            setVitals(data);
        } catch (err) {
            setError(err as Error);
        } finally {
            setLoading(false);
        }
    }, [patientId]);

    useEffect(() => {
        fetchVitals();
        const interval = setInterval(fetchVitals, 30_000);
        return () => clearInterval(interval);
    }, [fetchVitals]);

    return { vitals, loading, error, refetch: fetchVitals };
}

Usage

@* Cleanest — pass Code as a verbatim string in @code *@
<CodeBlock Filename="Home.razor" Language="razor" Code="@example" />

@* Light theme, no copy button, capped height *@
<CodeBlock Theme="light"
           Filename="config.json"
           Language="json"
           ShowCopy="false"
           MaxHeight="24rem"
           Code="@json" />

@* Line numbers + filename *@
<CodeBlock Filename="Program.cs"
           Language="csharp"
           ShowLineNumbers="true"
           Code="@program" />

@* Bare (no header bar) — drop into framed containers *@
<CodeBlock Bare="true" Code="@shellCommand" />

@code {
    private const string example = @@"<Button Variant=""primary"" />";
}