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

madcampos · bluwy · sarah11918 · web-flow · commit 49b5145158a6 · 2024-07-17T10:55:04.000-04:00
* 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 &lt;bjornlu.dev@gmail.com&gt;

* Update .changeset/cold-crabs-arrive.md

Co-authored-by: Sarah Rainsberger &lt;sarah@rainsberger.ca&gt;

* feat: improve changeset

* grammar tweak

---------

Co-authored-by: Bjorn Lu &lt;bjornlu.dev@gmail.com&gt;
Co-authored-by: Sarah Rainsberger &lt;sarah@rainsberger.ca&gt;
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

Original file line number	Diff line number	Diff line change
`@@ -321,6 +321,7 @@ export const AstroConfigSchema = z.object({`
`321`	`321`	`.or(z.custom<ShikiTheme>())`
`322`	`322`	`)`
`323`	`323`	`.default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.themes!),`
	`324`	`+ defaultColor: z.union([z.literal('light'), z.literal('dark'), z.string(), z.literal(false)]).optional(),`
`324`	`325`	`wrap: z.boolean().or(z.null()).default(ASTRO_CONFIG_DEFAULTS.markdown.shikiConfig.wrap!),`
`325`	`326`	`transformers: z`
`326`	`327`	`.custom<ShikiTransformer>()`
Original file line number	Diff line number	Diff line change
`@@ -39,6 +39,7 @@ export interface ShikiConfig {`
`39`	`39`	`langs?: LanguageRegistration[];`
`40`	`40`	`theme?: ThemePresets \| ThemeRegistration \| ThemeRegistrationRaw;`
`41`	`41`	`themes?: Record<string, ThemePresets \| ThemeRegistration \| ThemeRegistrationRaw>;`
	`42`	`+ defaultColor?: 'light' \| 'dark' \| string \| false;`
`42`	`43`	`wrap?: boolean \| null;`
`43`	`44`	`transformers?: ShikiTransformer[];`
`44`	`45`	`}`