Code Blocks

The theme replaces Starlight’s built-in Expressive Code with a custom Shiki pipeline for syntax highlighting.

Basic Usage

Use fenced code blocks with a language identifier:

interface User {
  name: string;
  email: string;
  role: "admin" | "user";
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

Line Highlighting

Highlight specific lines using the {lines} syntax in the code fence meta:

const config = {
  theme: "celestia",
  sidebar: true,
  multiSidebar: true,
};

Diff Notation

Use // [!code ++] and // [!code --] for diff annotations:

const config = {
  theme: "nova", 
  theme: "celestia", 
};

Themes

Light Theme

Code blocks use one-light in light mode.

Dark Theme

Code blocks use github-dark-dimmed in dark mode.

Both themes are loaded simultaneously and toggled via CSS based on the active theme.