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 4e36e94..8c479ac 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 e847729..f11734e 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]]
+ },
+ }
+}