🍿 Minor Changes
-
#2322
f14eb0cThanks @HiDeoo! - Groups all of Starlight’s CSS declarations into a singlestarlightcascade layer.This change allows for easier customization of Starlight’s CSS as any custom unlayered CSS will override the default styles. If you are using cascade layers in your custom CSS, you can use the
@layerCSS at-rule to define the order of precedence for different layers including the ones used by Starlight.We recommend checking your site’s appearance when upgrading to make sure there are no style regressions caused by this change.
-
#3122
3a087d8Thanks @delucis! - Removes defaultattrsandcontentvalues from head entries parsed using Starlight’s schema.Previously when adding
headmetadata via frontmatter or user config, Starlight would automatically add values forattrsandcontentif not provided. Now, these properties are leftundefined.This makes it simpler to add tags in route middleware for example as you no longer need to provide empty values for
attrsandcontent:head.push({tag: 'style',content: 'div { color: red }'attrs: {},});head.push({tag: 'link',content: ''attrs: { rel: 'me', href: 'https://example.com' },});This is mostly an internal API but if you are overriding Starlight’s
Headcomponent or processing head entries in some way, you may wish to double check your handling ofAstro.locals.starlightRoute.headis compatible withattrsandcontentpotentially beingundefined. -
#3033
8c19678Thanks @delucis! - Adds support for generating clickable anchor links for headings.By default, Starlight now renders an anchor link beside headings in Markdown and MDX content. A new
<AnchorHeading>component is available to achieve the same thing in custom pages built using<StarlightPage>.If you want to disable this new Markdown processing set the
markdown.headingLinksoption in your Starlight config tofalse:starlight({title: 'My docs',markdown: {headingLinks: false,},}),⚠️ BREAKING CHANGE: The minimum supported version of Astro is now v5.5.0.
Please update Starlight and Astro together:
Terminal window npx @astrojs/upgrade -
#2322
f14eb0cThanks @HiDeoo! - Removes Shikicss-variablestheme fallback.⚠️ BREAKING CHANGE:
Previously, Starlight used to automatically provide a fallback theme for Shiki, the default syntax highlighter built into Astro if the configured Shiki theme was not
github-dark.This fallback was only relevant when the default Starlight code block renderer, Expressive Code, was disabled and Shiki was used. Starlight no longer provides this fallback.
If you were relying on this behavior, you now manually need to update your Astro configuration to use the Shiki
css-variablestheme to match the previous behavior.import { defineConfig } from 'astro/config';export default defineConfig({markdown: {shikiConfig: {theme: 'css-variables',},},});Additionally, you can use custom CSS to control the appearance of the code blocks. Here are the previously used CSS variables for the fallback theme:
:root {--astro-code-foreground: var(--sl-color-white);--astro-code-background: var(--sl-color-gray-6);--astro-code-token-constant: var(--sl-color-blue-high);--astro-code-token-string: var(--sl-color-green-high);--astro-code-token-comment: var(--sl-color-gray-2);--astro-code-token-keyword: var(--sl-color-purple-high);--astro-code-token-parameter: var(--sl-color-red-high);--astro-code-token-function: var(--sl-color-red-high);--astro-code-token-string-expression: var(--sl-color-green-high);--astro-code-token-punctuation: var(--sl-color-gray-2);--astro-code-token-link: var(--sl-color-blue-high);}
