Syntax highlighting

Shiki highlighting with matching light and dark themes.

Code blocks are highlighted at build time with Shiki, so there is no highlighting library shipped to the browser. Light and dark themes are both embedded and switch with the mode toggle.

bun run build

Bash

Hover a code block to reveal its toolbar: a copy button, a line-numbers toggle (off by default), and, for long snippets, an expand lever. The example below is long enough to be collapsed to code.maxLines until you expand it:

import { defineThemeConfig } from "@compose/theme-config";

// A fuller configuration showing the whole option surface. This comment is intentionally very long so the code block overflows horizontally, which is what makes the contextual wrap toggle appear in the toolbar; click it to wrap.
export const config = defineThemeConfig({
  title: "Compose",
  darkMode: true,
  defaultLightingMode: "auto",
  blogDir: "blog",
  code: {
    maxLines: 25,
    showLineNumbers: false,
  },
  search: {
    enabled: true,
    global: true,
    engine: "pagefind",
    algolia: { enabled: false },
  },
  logo: {
    light: "/images/compose.svg",
    dark: "/images/compose-light.svg",
  },
  author: {
    name: "Compose",
    url: "https://example.com",
  },
  menu: [
    { name: "Docs", url: "/docs", weight: 1 },
    { name: "Blog", url: "/blog", weight: 2 },
  ],
});

TypeScript

The copy button uses the modern clipboard API.