Code Blocks

Overview

The themes ships with the Northwestern code block treatment by default. This page shows the supported Code component patterns that are most useful when authoring docs.

Terminal Frames

Use the default terminal presentation for commands and shell output.

bash

pnpm add @nu-appdev/northwestern-starlight-theme

bash

pnpm add @nu-appdev/northwestern-starlight-theme @astrojs/starlight astro mermaid sharp @astrojs/check

Code Frames

Use frame="code" when you want the snippet to read like a file instead of a terminal command.

If your site includes an ec.config.mjs file using northwesternExpressiveCode(), line numbers are available as an opt-in feature.

Add showLineNumbers to a fenced code block when you want a numbered gutter:

astro.config.ts

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import northwesternTheme from "@nu-appdev/northwestern-starlight-theme";

export default defineConfig({
    integrations: [
        starlight({
            plugins: [northwesternTheme()],
            title: "My Docs",
        }),
    ],
});

In the <Code> component, use the showLineNumbers prop directly.

astro.config.ts

import starlight from "@astrojs/starlight";
import { defineConfig } from "astro/config";
import northwesternTheme from "@nu-appdev/northwestern-starlight-theme";

export default defineConfig({
    integrations: [
        starlight({
            plugins: [northwesternTheme()],
            title: "My Docs",
        }),
    ],
});

tokens.css

:root {
    --nu-purple-100: #4e2a84;
    --nu-purple-80: #836eaa;
    --nu-sidebar-bg: #f8f6fb;
}

[data-theme="dark"] {
    --nu-sidebar-bg: #1d1328;
}

Frame Variants

You can also remove the frame entirely when you want a quieter inline example.

{
    "name": "@nu-appdev/northwestern-starlight-theme",
    "type": "module",
    "version": "0.1.0",
    "peerDependencies": {
        "@astrojs/starlight": "^0.38.0",
        "astro": "^6.0.0"
    }
}

Markers

Markers are useful for focusing attention on specific lines or text ranges.

theme.ts

export function buildTheme(options) {
    const plugin = northwesternTheme(options);

    return {
        integrations: [plugin],
        title: "Northwestern Docs",
    };
}

navigation.ts

export function updateNavigation(items) {
    const primary = items.filter((item) => item.primary);
    const secondary = items.filter((item) => !item.primary);

    return {
        primary,
        secondary,
    };
}

Wrapping

Long snippets can wrap cleanly with wrap, preserveIndent, and hangingIndent.

install.ts

const install = "pnpm add @nu-appdev/northwestern-starlight-theme @astrojs/starlight astro mermaid sharp @astrojs/check";

Class Hook

The class prop can be used when you want a one-off variation for a specific example.

install.ts

const install = "pnpm add @nu-appdev/northwestern-starlight-theme @astrojs/starlight astro mermaid sharp @astrojs/check";