Expressive Code

Use the dedicated themes for syntax highlighting, editor and terminal frames, copy buttons, line numbers, and highlighted or diff lines.

For Astro:

pnpm add @living-code/expressive-code astro-expressive-code

Add the integration to astro.config.mjs:

import { defineConfig } from "astro/config";
import expressiveCode from "astro-expressive-code";
import night from "@living-code/expressive-code/living-code-night.json" with { type: "json" };
import paper from "@living-code/expressive-code/living-code-paper.json" with { type: "json" };

export default defineConfig({
  integrations: [expressiveCode({ themes: [night, paper] })],
});

Night and Paper follow the visitor’s dark/light preference by default. Replace Night with living-code-frost.json or living-code-signal.json for another dark flavor, or pass a single theme for a fixed appearance.

Starlight: pass the same themes array to starlight({ expressiveCode: { themes: [night, paper] } }) instead of adding a separate integration. For other integrations, pass these JSON objects to their Expressive Code themes option. When using the ExpressiveCode JavaScript API directly, wrap each JSON object in new ExpressiveCodeTheme(theme) (imported from expressive-code).