Light/dark theming for shikiji's codeblocks

.changeset/tender-suits-glow.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/markdown-remark': patch
+---
+
+Adds experimental support for multiple themes in `shikiji`.

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: [],

packages/markdown/remark/src/remark-shiki.ts

@@ -30,17 +30,23 @@ 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(',');
 
 	let highlighterAsync = highlighterCacheAsync.get(cacheId);
 	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.

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;
 }
 

packages/markdown/remark/test/shiki.js

@@ -1,12 +1,30 @@
 import { createMarkdownProcessor } from '../dist/index.js';
 import chai from 'chai';
 
-describe('shiki syntax highlighting', async () => {
-	const processor = await createMarkdownProcessor();
-
+describe('shiki syntax highlighting', () => {
 	it('does not add is:raw to the output', async () => {
+		const processor = await createMarkdownProcessor();
 		const { code } = await processor.render('```\ntest\n```');
 
 		chai.expect(code).not.to.contain('is:raw');
 	});
+
+	it('supports light/dark themes', async () => {
+		const processor = await createMarkdownProcessor({
+			shikiConfig: {
+				experimentalThemes: {
+					light: 'github-light',
+					dark: 'github-dark',
+				},
+			},
+		});
+		const { code } = await processor.render('```\ntest\n```');
+
+		// light theme is there:
+		chai.expect(code).to.contain('background-color:');
+		chai.expect(code).to.contain('github-light');
+		// dark theme is there:
+		chai.expect(code).to.contain('--shiki-dark-bg:');
+		chai.expect(code).to.contain('github-dark');
+	});
 });