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

Silviu Lorenț

2024-02-17 fa2ea2896f0977253733334199d28e509351e621

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

* feat: add user-defined options to syntax highlighting plugin

* feat: add default syntax highlighting config to `quartz.config.ts`

* chore: refactor according to @aarnphm's review

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>

* chore: run Prettier on `quartz/plugins/transformers/syntax.ts`

* Update quartz/plugins/transformers/syntax.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update syntax.ts

---------

Co-authored-by: Aaron Pham <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

 quartz.config.ts

@@ -53,7 +53,16 @@
        priority: ["frontmatter", "filesystem"],
      }),
      Plugin.Latex({ renderEngine: "katex" }),
      Plugin.SyntaxHighlighting(),
      Plugin.SyntaxHighlighting({
        // uses themes bundled with Shikiji, see https://shikiji.netlify.app/themes
        theme: {
          light: "github-light",
          dark: "github-dark",
        },
        // set this to 'true' to use the background color of the Shikiji theme
        // if set to 'false', will use Quartz theme colors for background
        keepBackground: false,
      }),
      Plugin.ObsidianFlavoredMarkdown({ enableInHtmlEmbed: false }),
      Plugin.GitHubFlavoredMarkdown(),
      Plugin.TableOfContents(),

 quartz/plugins/transformers/syntax.ts

@@ -1,20 +1,33 @@
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 const SyntaxHighlighting: QuartzTransformerPlugin = () => ({
interface Theme extends Record<string, CodeTheme> {
  light: CodeTheme
  dark: CodeTheme
}

interface Options {
  theme?: Theme
  keepBackground?: boolean
}

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,
        {
          keepBackground: false,
          theme: {
            dark: "github-dark",
            light: "github-light",
      return [[rehypePrettyCode, opts]]
          },
        } satisfies Partial<CodeOptions>,
      ],
    ]
  },
})
  }
}