@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