feat: add user-defined config for syntax highlighting plugin (#869)

Silviu Lorenț

2024-02-17 fa2ea2896f0977253733334199d28e509351e621

 quartz/plugins/transformers/syntax.ts

@@ -1,28 +1,33 @@
import { PluggableList } from "unified"
import { QuartzTransformerPlugin } from "../types"
import rehypePrettyCode, { Options as CodeOptions } from "rehype-pretty-code"
import rehypePrettyCode, { Options as CodeOptions, Theme as CodeTheme } from "rehype-pretty-code"

export class SyntaxHighlighting extends QuartzTransformerPlugin {
  name = "SyntaxHighlighting"
interface Theme extends Record<string, CodeTheme> {
  light: CodeTheme
  dark: CodeTheme
}

  markdownPlugins(): PluggableList {
    return []
  }
interface Options {
  theme?: Theme
  keepBackground?: boolean
}

  htmlPlugins(): PluggableList {
    return [[rehypePrettyCode, {
      theme: 'css-variables',
      onVisitLine(node) {
        if (node.children.length === 0) {
          node.children = [{ type: 'text', value: ' ' }]
        }
      },
      onVisitHighlightedLine(node) {
        node.properties.className.push('highlighted')
      },
      onVisitHighlightedWord(node) {
        node.properties.className = ['word']
      },
    } satisfies Partial<CodeOptions>]]
const defaultOptions: Options = {
  theme: {
    light: "github-light",
    dark: "github-dark",
  },
  keepBackground: false,
}

export const SyntaxHighlighting: QuartzTransformerPlugin<Options> = (
  userOpts?: Partial<Options>,
) => {
  const opts: Partial<CodeOptions> = { ...defaultOptions, ...userOpts }

  return {
    name: "SyntaxHighlighting",
    htmlPlugins() {
      return [[rehypePrettyCode, opts]]
    },
  }
}