📜 Living Code for Expressive Code

Calm slate. Living color.
Living Code for Expressive Code. Repository-owned theme files, installation instructions and four color flavors.

Installation · Flavors · Configuration · All ports

Installation

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).

Flavors

Expand a flavor for its activation instructions.

Night · Dark · full palette

Import @living-code/expressive-code/living-code-night.json and pass it to the integration's themes option. With the JavaScript API, wrap it in new ExpressiveCodeTheme(theme).

Frost · Dark · softer chroma

Import @living-code/expressive-code/living-code-frost.json and pass it to the integration's themes option. With the JavaScript API, wrap it in new ExpressiveCodeTheme(theme).

Paper · Light · near-white slate

Import @living-code/expressive-code/living-code-paper.json and pass it to the integration's themes option. With the JavaScript API, wrap it in new ExpressiveCodeTheme(theme).

Signal · Dark · teal accent

Import @living-code/expressive-code/living-code-signal.json and pass it to the integration's themes option. With the JavaScript API, wrap it in new ExpressiveCodeTheme(theme).

Configuration

See Expressive Code's documentation for application settings and reload behavior. The activation instructions above identify each supported flavor; keep your other application configuration.

Compatibility

Preserves the npm package name @living-code/expressive-code and its existing import paths. Package publication and registry credentials are separate from creating this repository.

Contributing

Found a problem? Open an issue with the app version, the flavor and a screenshot. Want Living Code somewhere else? Request a port.

Pull requests are welcome. Keep this README, port.json and images/ in sync, and use real screenshots of the app, never mockups.

_{🦎 One chameleon, many habitats. Part of Living Code.}

License

_{© Elliot Luque}