183 words · 1 min read · Sandbox reading stats

Syntax highlighting themes

What this demonstrates

@quartz-community/syntax-highlighting runs Shiki while Quartz builds. It emits highlighted HTML with token-level styles and metadata; the browser does not need a highlighter runtime. The selected theme pair follows the site’s light/dark mode, while keepBackground: true keeps each code block’s theme background visible as a deliberate sandbox choice.

Configuration used

  - source: "@quartz-community/syntax-highlighting"
    enabled: true
    options:
      theme:
        light: github-light
        dark: github-dark
      keepBackground: true
      clipboard: true
      tokenClassification: true
    order: 20

The pinned plugin’s theme defaults are github-light/github-dark; this experiment makes the pair explicit and changes only keepBackground from false to true.

Content used

```typescript
export function isolationBoundaries(): string[] {
  return ["checkout", "node_modules", "config", "dist", "origin port"]
}

configuration:
  pageTitle: Quartz Sandbox
  baseUrl: quartz.loca.zone

## Rendered result

```typescript
export function isolationBoundaries(): string[] {
  return ["checkout", "node_modules", "config", "dist", "origin port"]
}

configuration:
  pageTitle: Quartz Sandbox
  baseUrl: quartz.loca.zone

The code blocks are intentionally different languages: TypeScript exercises identifiers, strings and a return type; YAML exercises keys, punctuation and scalar values. Toggle dark mode to see the paired theme switch without rebuilding the vault.

What the rendered output proves

The static HTML contains a data-rehype-pretty-code-figure wrapper for each highlighted block, data-language="typescript" and data-language="yaml" attributes, and data-token-type metadata on token spans. A copy button is present because clipboard: true. The plugin’s v5 output intentionally does not retain Shiki’s old shiki CSS class; the data-rehype-pretty-code-* markers are the stable assertion.

safe_for_shared_engine

true — syntax highlighting changes only code blocks that exist in a page and is already a standard Quartz transformer; the theme pair and background choice are reversible config.