Light/dark theming for shikiji's codeblocks (#8903)

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

3 files changed, 11 insertions, 2 deletions

diff --git a/packages/markdown/remark/src/index.ts b/packages/markdown/remark/src/index.ts
index 89c9ca8bd..61f97072b 100644
--- a/packages/markdown/remark/src/index.ts
+++ b/packages/markdown/remark/src/index.ts
@@ -39,6 +39,7 @@ export const markdownConfigDefaults: Omit<Required<AstroMarkdownOptions>, 'draft
 	shikiConfig: {
 		langs: [],
 		theme: 'github-dark',
+		experimentalThemes: {},
 		wrap: false,
 	},
 	remarkPlugins: [],
diff --git a/packages/markdown/remark/src/remark-shiki.ts b/packages/markdown/remark/src/remark-shiki.ts
index bf3dd0b78..4eaae5ff2 100644
--- a/packages/markdown/remark/src/remark-shiki.ts
+++ b/packages/markdown/remark/src/remark-shiki.ts
@@ -30,9 +30,15 @@ const highlighterCacheAsync = new Map<string, Promise<Highlighter>>();
 export function remarkShiki({
 	langs = [],
 	theme = 'github-dark',
+	experimentalThemes = {},
 	wrap = false,
 }: ShikiConfig = {}): ReturnType<RemarkPlugin> {
+	const themes = experimentalThemes;
+
 	const cacheId =
+		Object.values(themes)
+			.map((t) => (typeof t === 'string' ? t : t.name ?? ''))
+			.join(',') +
 		(typeof theme === 'string' ? theme : theme.name ?? '') +
 		langs.map((l) => l.name ?? (l as any).id).join(',');
 
@@ -40,7 +46,7 @@ export function remarkShiki({
 	if (!highlighterAsync) {
 		highlighterAsync = getHighlighter({
 			langs: langs.length ? langs : Object.keys(bundledLanguages),
-			themes: [theme],
+			themes: Object.values(themes).length ? Object.values(themes) : [theme],
 		});
 		highlighterCacheAsync.set(cacheId, highlighterAsync);
 	}
@@ -64,7 +70,8 @@ export function remarkShiki({
 				lang = 'plaintext';
 			}
 
-			let html = highlighter.codeToHtml(node.value, { lang, theme });
+			let themeOptions = Object.values(themes).length ? { themes } : { theme };
+			let html = highlighter.codeToHtml(node.value, { ...themeOptions, lang });
 
 			// Q: Couldn't these regexes match on a user's inputted code blocks?
 			// A: Nope! All rendered HTML is properly escaped.
diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts
index 4abcf578d..7038e2425 100644
--- a/packages/markdown/remark/src/types.ts
+++ b/packages/markdown/remark/src/types.ts
@@ -42,6 +42,7 @@ export type RemarkRehype = Omit<RemarkRehypeOptions, 'handlers' | 'unknownHandle
 export interface ShikiConfig {
 	langs?: LanguageRegistration[];
 	theme?: BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw;
+	experimentalThemes?: Record<string, BuiltinTheme | ThemeRegistration | ThemeRegistrationRaw>;
 	wrap?: boolean | null;
 }