Code Blocks

The theme ships with Northwestern code block styling. This page covers syntax highlighting, line numbers, markers, and frame styles.

Terminal Frames

```bash title="bash"
pnpm add @nu-appdev/northwestern-starlight-theme
```

bash

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

Long commands can wrap with wrap={true}:

<Code code={longCommand} lang="bash" title="bash" wrap={true} hangingIndent={2} />

bash

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

Code Frames

frame="code" renders the snippet as a file. Add showLineNumbers for a numbered gutter:

```ts showLineNumbers title="astro.config.ts"
// ...
```

astro.config.ts

import { defineNorthwesternConfig } from "@nu-appdev/northwestern-starlight-theme/config";

export default defineNorthwesternConfig({
    site: "https://docs.example.northwestern.edu",
    starlight: {
        title: "My Docs",
        sidebar: [
            { label: "Guide", autogenerate: { directory: "guide" } },
        ],
    },
});

The <Code> component accepts the same option via meta:

<Code code={configSnippet} lang="ts" title="astro.config.ts" frame="code" meta="showLineNumbers" />

astro.config.ts

import { defineNorthwesternConfig } from "@nu-appdev/northwestern-starlight-theme/config";

export default defineNorthwesternConfig({
    site: "https://docs.example.northwestern.edu",
    starlight: {
        title: "My Docs",
        sidebar: [
            { label: "Guide", autogenerate: { directory: "guide" } },
        ],
    },
});

Frame Variants

frame="none" removes the frame:

<Code code={jsonSnippet} lang="json" frame="none" />

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

Markers

Highlight specific lines, text, or ranges with mark, ins, and del:

<Code code={snippet} lang="ts" title="config.ts"
    mark={[2, "defineNorthwesternConfig", { range: "4-7", label: "output" }]} />

config.ts

export function buildConfig(options) {
    const { title, sidebar } = options;

    return defineNorthwesternConfig({
        starlight: { title, sidebar },
        theme: { ogImage: true },
    });
}

Diff-style markers with del and ins:

<Code code={snippet} lang="ts" title="navigation.ts"
    del={[2, "secondary"]}
    ins={[1, { range: "6-9", label: "new" }]}
    mark="primary" />

navigation.ts

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

    return {
        primary,
        secondary,
    };
}

Wrapping

<Code code={snippet} lang="ts" wrap={true} preserveIndent={true} hangingIndent={3} />

install.ts

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

Class Hook

The class prop applies a one-off style to a specific block:

<Code code={snippet} lang="ts" class="nu-code-block-accent" wrap={true} />

install.ts

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