diff --git a/quartz.config.ts b/quartz.config.ts
index 4e36e9408..8c479ac78 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -53,7 +53,16 @@ const config: QuartzConfig = {
         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(),
diff --git a/quartz/plugins/transformers/syntax.ts b/quartz/plugins/transformers/syntax.ts
index e84772962..f11734e5f 100644
--- a/quartz/plugins/transformers/syntax.ts
+++ b/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 = () => ({
-  name: "SyntaxHighlighting",
-  htmlPlugins() {
-    return [
-      [
-        rehypePrettyCode,
-        {
-          keepBackground: false,
-          theme: {
-            dark: "github-dark",
-            light: "github-light",
-          },
-        } satisfies Partial<CodeOptions>,
-      ],
-    ]
+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, opts]]
+    },
+  }
+}