diff --git a/.changeset/thin-dodos-serve.md b/.changeset/thin-dodos-serve.md new file mode 100644 index 0000000000..72294343da --- /dev/null +++ b/.changeset/thin-dodos-serve.md @@ -0,0 +1,5 @@ +--- +'astro': minor +--- + +Adds Shiki's [`defaultColor`](https://shiki.style/guide/dual-themes#without-default-color) option to the `` component, giving you more control in applying multiple themes diff --git a/packages/astro/components/Code.astro b/packages/astro/components/Code.astro index 7b8f3ab422..b8527ce89a 100644 --- a/packages/astro/components/Code.astro +++ b/packages/astro/components/Code.astro @@ -36,6 +36,16 @@ interface Props extends Omit, 'lang'> { * Supports all themes found above; see https://shiki.style/guide/dual-themes for more information. */ themes?: Record; + /** + * Chooses a theme from the "themes" option that you've defined as the default styling theme. + * - : one of the keys defined in the "themes" option. Will throw an error if the key is not defined. + * - false: disabled. You'll have to apply the styling theme yourself. No effect if the "themes" option is not set. + * + * See https://shiki.style/guide/dual-themes#without-default-color for more information. + * + * @default "light" + */ + defaultColor?: 'light' | 'dark' | string | false /** * Enable word wrapping. * - true: enabled. @@ -64,6 +74,7 @@ const { lang = 'plaintext', theme = 'github-dark', themes = {}, + defaultColor = 'light', wrap = false, inline = false, transformers = [], @@ -92,6 +103,7 @@ const highlighter = await getCachedHighlighter({ ], theme, themes, + defaultColor, wrap, transformers, });