From fa2ea2896f0977253733334199d28e509351e621 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Silviu=20Loren=C8=9B?=
 <124451350+smilorent@users.noreply.github.com>
Date: Sat, 17 Feb 2024 20:23:45 +0200
Subject: [PATCH] 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                      | 11 ++++++-
 quartz/plugins/transformers/syntax.ts | 47 +++++++++++++++++----------
 2 files changed, 40 insertions(+), 18 deletions(-)

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]]
+    },
+  }
+}