Feature: add support for shiki defaultColors option (#11341)

* feat: add shiki option for default color * feat: propagate shiki option for default color to astro config * feat: add tests for default color * chore: add change set * fix: add complete type to shiki default color config * fix: remove unneeded heavy shiki theme from fixture * fix: add literals to schema validation Co-authored-by: Bjorn Lu <[email protected]> * Update .changeset/cold-crabs-arrive.md Co-authored-by: Sarah Rainsberger <[email protected]> * feat: improve changeset * grammar tweak --------- Co-authored-by: Bjorn Lu <[email protected]> Co-authored-by: Sarah Rainsberger <[email protected]>
withastro · Jul 17, 2024 · 49b5145 · 49b5145
1 parent f4870e5
commit 49b5145
Show file tree

Hide file tree

Showing 11 changed files with 129 additions and 0 deletions.
diff --git a/.changeset/cold-crabs-arrive.md b/.changeset/cold-crabs-arrive.md
@@ -0,0 +1,32 @@
+---
+'@astrojs/markdown-remark': minor
+'astro': minor
+---
+
+Adds support for [Shiki's `defaultColor` option](https://shiki.style/guide/dual-themes#without-default-color).
+
+This option allows you to override the values of a theme's inline style, adding only CSS variables to give you more flexibility in applying multiple color themes.
+
+Configure `defaultColor: false` in your Shiki config to apply throughout your site, or pass to Astro's built-in `<Code>` component to style an individual code block.
+
+```js title="astro.config.mjs"
+import { defineConfig } from 'astro/config';
+export default defineConfig({
+  markdown: {
+    shikiConfig: {
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark',
+      },
+      defaultColor: false,
+    },
+  },
+});
+```
+
+```astro
+---
+import { Code } from 'astro:components';
+---
+<Code code={`const useMyColors = true`} lang="js" defaultColor={false} />
+```
diff --git a/packages/astro/src/core/config/schema.ts b/packages/astro/src/core/config/schema.ts
@@ -321,6 +321,7 @@ export const AstroConfigSchema = z.object({
 								.or(z.custom<ShikiTheme>())
 						)
 						.default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.themes!),
+					defaultColor: z.union([z.literal('light'), z.literal('dark'), z.string(), z.literal(false)]).optional(),
 					wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!),
 					transformers: z
 						.custom<ShikiTransformer>()

diff --git a/packages/astro/test/astro-markdown-shiki.test.js b/packages/astro/test/astro-markdown-shiki.test.js
@@ -78,6 +78,22 @@ describe('Astro Markdown Shiki', () => {
 				);
 			});
 		});
+
+		describe('Default color', async () => {
+			let fixture;
+
+			before(async () => {
+				fixture = await loadFixture({ root: './fixtures/astro-markdown-shiki/default-color/' });
+				await fixture.build();
+			});
+
+			it('Renders default color without themes', async () => {
+				const html = await fixture.readFile('/index.html');
+				const $ = cheerio.load(html);
+
+				assert.doesNotMatch($('pre').attr().style, /background-color/);
+			});
+		});
 	});
 
 	describe('Languages', () => {

diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/astro.config.mjs
@@ -0,0 +1,13 @@
+export default {
+	markdown: {
+		syntaxHighlight: 'shiki',
+		shikiConfig: {
+			theme: 'github-light',
+			themes: {
+				light: 'github-light',
+				dark: 'github-light'
+			},
+			defaultColor: false
+		},
+	},
+}
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@test/astro-markdown-skiki-default-color",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/layouts/content.astro
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+    <div class="container">
+      <slot></slot>
+    </div>
+  </body>
+</html>
diff --git a/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md b/packages/astro/test/fixtures/astro-markdown-shiki/default-color/src/pages/index.md
@@ -0,0 +1,24 @@
+---
+layout: ../layouts/content.astro
+---
+
+# Hello world
+
+```yaml
+apiVersion: v3
+kind: Pod
+metadata:
+  name: rss-site
+  labels:
+    app: web
+spec:
+  containers:
+    - name: front-end
+      image: nginx
+      ports:
+        - containerPort: 80
+    - name: rss-reader
+      image: nickchase/rss-php-nginx:v1
+      ports:
+        - containerPort: 88
+```
diff --git a/packages/markdown/remark/src/shiki.ts b/packages/markdown/remark/src/shiki.ts
@@ -42,6 +42,7 @@ export async function createShikiHighlighter({
 	langs = [],
 	theme = 'github-dark',
 	themes = {},
+	defaultColor,
 	wrap = false,
 	transformers = [],
 }: ShikiConfig = {}): Promise<ShikiHighlighter> {
@@ -73,6 +74,7 @@ export async function createShikiHighlighter({
 
 			return highlighter.codeToHtml(code, {
 				...themeOptions,
+				defaultColor,
 				lang,
 				// NOTE: while we can spread `options.attributes` here so that Shiki can auto-serialize this as rendered
 				// attributes on the top-level tag, it's not clear whether it is fine to pass all attributes as meta, as

diff --git a/packages/markdown/remark/src/types.ts b/packages/markdown/remark/src/types.ts
@@ -39,6 +39,7 @@ export interface ShikiConfig {
 	langs?: LanguageRegistration[];
 	theme?: ThemePresets | ThemeRegistration | ThemeRegistrationRaw;
 	themes?: Record<string, ThemePresets | ThemeRegistration | ThemeRegistrationRaw>;
+	defaultColor?: 'light' | 'dark' | string | false;
 	wrap?: boolean | null;
 	transformers?: ShikiTransformer[];
 }

diff --git a/packages/markdown/remark/test/shiki.test.js b/packages/markdown/remark/test/shiki.test.js
@@ -85,4 +85,20 @@ describe('shiki syntax highlighting', () => {
 
 		assert.match(html, /data-test="\{1,3-4\}"/);
 	});
+
+	it('supports the defaultColor setting', async () => {
+		const processor = await createMarkdownProcessor({
+			shikiConfig: {
+				themes: {
+					light: 'github-light',
+					dark: 'github-dark',
+				},
+				defaultColor: false,
+			},
+		});
+		const { code } = await processor.render('```\ntest\n```');
+
+		// Doesn't have `color` or `background-color` properties.
+		assert.doesNotMatch(code, /color:/);
+	});
 });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml