@quartz-community/syntax-highlighting

Adds syntax highlighting to code blocks using rehype-pretty-code, with an optional clipboard copy button.

Installation

npx quartz plugin add github:quartz-community/syntax-highlighting

Usage

plugins:
  - source: github:quartz-community/syntax-highlighting
    enabled: true
    options:
      theme:
        light: github-light
        dark: github-dark
      keepBackground: false

For advanced use cases, you can override in TypeScript:

import * as ExternalPlugin from "./.quartz/plugins";

ExternalPlugin.SyntaxHighlighting({
  theme: { light: "github-light", dark: "github-dark" },
  keepBackground: false,
});

Configuration

| Option | Type | Default | Description | | --------------------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- | | theme | { light: CodeTheme, dark: CodeTheme } | { light: "github-light", dark: "github-dark" } | The theme to use for syntax highlighting. | | keepBackground | boolean | false | Whether to keep the background color of the code block. | | clipboard | boolean | true | Whether to add a clipboard copy button to code blocks. | | tokenClassification | boolean | true | Adds data-token-type attributes (keyword, string, comment, etc.) to token spans. Enables theme-aware code styling via CSS selectors. |

Documentation

See the Quartz documentation for more information.

License

MIT